尝试创建切换功能，根据附加到第三个按钮的onClick事件将2个按钮的状态从禁用设置为启用

Question

I have a set of 3 buttons where I need to set the initial state for two buttons as disabled and then create an onClick event for a third button that would enable both buttons when clicked. I'm thinking of setting the disabled attribute in state and then creating the function for onClick that would target the state of both buttons and set it to false . My current code is below, any ideas on how to achieve this?

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'));

Answer 1

You're almost there.

In your render method, you've set disabled={true} which means that it will permanently stay true instead of checking the value of the disabled property in state.

The toggle method should simply negate the previous value of 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'));

Also, consider using a toggle component of sorts instead of the third button for better user experience.