如何通过单击 Reactjs 中的按钮将 FormControl 从禁用切换为启用

Question

我是 React 的新手，刚开始使用 state，所以请与我一起工作。 我还发现了很多类似的问题，但没有真正解决以下问题：

我有一个禁用 FormControls 的 reactstrap 表单。 当用户单击“编辑”按钮时，需要启用 FormControls。 据我所知，使用 JSX 应该很简单，但我尝试过的任何方法都没有奏效。 对我来说，这可能只是一个愚蠢的实施错误。

 class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editToggle: false,
      userName: "Star Lord",
      accTier: "Premium",
      credit: "95 855 651", 
      vehicle: "The Milano",
      contact: "Echoe Golf Oscar 12.465Ghz"
    }
    
    // This binding is necessary to make `this` work in the callback
    this.editInputToggle = this.editInputToggle.bind(this);
  }

  editInputToggle() {
    this.setState(prevState => ({
      editToggle: !prevState.editToggle
    }));
  }

  onValueChange = (e) => {
    this.setState({ fullName: e.target.value });
};

  render() {
    const { editToggle } = this.state;

    // We need give the components function a return statement.
    return (
      /* The Component can only return one parent element,
      while parent elements can have many children */
      <div className='profileDetails'>
        {/* Bootstrap Form is used for the form
              Bootstrap Button is used for the edit button */}
        <Form id='formProfile'>
        
          <Form.Group className="mb-3" controlId="formProfileDetails">
            <Form.Label>US3RNAME:</Form.Label>
            <Form.Control type="text" value={this.state.userName}
            onChange={this.onValueChange}  className='user-info' />
            <Form.Label>ACC0uNT TI3R:</Form.Label>
            <Form.Control disabled type="text" value={this.state.accTier} onChange={this.onValueChange} className='user-info' />
            <Form.Label>CR3DiT:</Form.Label>
            <Form.Control disabled type="text" value={this.state.credit} onChange={this.onValueChange} className='user-info' />
            <Form.Label>R3GiSTERED VEHiCL3:</Form.Label>
            <Form.Control disabled type="text" value={this.state.vehicle} onChange={this.onValueChange} className='user-info' />
            <Form.Label>C0NTACT D3TAiLS:</Form.Label>
            <Form.Control disabled type="text" value={this.state.contact} onChange={this.onValueChange} className='user-info' />
          </Form.Group>

          <Button variant="light" size="sm" className='p-2 m-4 headerBtn' onClick={ () => this.editInputToggle(editToggle) }>
            Edit
          </Button>
        </Form>
      </div>
    );
  } 
}

我需要做什么才能将“禁用”更改为“”？

Answer 1

要启用 FormControl，

<Form.Control disabled={!this.state.editToggle} type="text" value={this.state.accTier} onChange={this.onValueChange} className='user-info' />

Answer 2

尝试用以下行替换“禁用”： disabled={this.state.editToggle? “真假”}