如何通過單擊 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? “真假”}