Блог

У меня есть набор из 3 кнопок, где мне нужно установить начальное состояние для двух кнопок как отключенное, а затем создать событие onClick для третьей кнопки, которое включало бы обе кнопки при нажатии. Я подумываю о том, чтобы установить атрибут disabled в state, а затем создать функцию для onClick, которая будет нацелена на состояние обеих кнопок и установит для нее значение false. Мой текущий код приведен ниже, есть идеи о том, как этого добиться?

 import React, { Component } from 'react';
import { render } from 'react-dom';
import { Button } from 'antd';
import "antd/dist/antd.css";
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      disabled: undefined
    };
  }

  toggleSwitch(){
    alert("you clicked the switch");
  }

  render() {
    return (
      <div>
        <Button disabled={true}>Modify Docs</Button>
        <Button disabled={true}>Upload Docs</Button>
        <Button onClick={this.toggleSwitch}>Unlock Quote</Button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

  

Вы почти на месте.

В вашем методе рендеринга вы установили, disabled={true} что означает, что он будет постоянно оставаться true вместо проверки значения свойства disabled в состоянии.

Метод переключения должен просто отрицать предыдущее значение отключено.

 import React, { Component } from 'react';
import { render } from 'react-dom';
import { Button } from 'antd';
import "antd/dist/antd.css";
import './style.css';

class App extends Component {

  state = {
    disabled: true,
  };

  toggleSwitch() {
    // when toggling, we just negate the previous value
    this.setState(previousState => ({
      disabled: !previousState.disabled,
    }))
  }

  render() {
    // Buttons will use the same value from state
    // to check if they should be disabled
    const { disabled } = this.state;

    // instead of setting disabled={true}, reference the disabled
    // property from state
    return (
      <div>
        <Button disabled={disabled}>Modify Docs</Button>
        <Button disabled={disabled}>Upload Docs</Button>

        {/* we set the text of the button depending on the value of disabled */}
        <Button onClick={this.toggleSwitch}>
          {disabled ? 'Unlock Quote' : 'Lock Quote'}
        </Button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));
  

Кроме того, рассмотрите возможность использования своего рода компонента переключения вместо третьей кнопки для улучшения пользовательского опыта.