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

Question

我是 React 的新手，刚开始使用状态，所以请多多包涵。我还发现了很多类似的问题，但没有真正解决以下问题：

我有一个禁用了 FormControls 的 reactstrap 表单。当用户单击 'edit' 按钮时，需要启用 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”：disabled={this.state.editToggle ? “真”：“假”}

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

How can I toggle a FormControl from disabled to enabled with a button click in Reactjs

javascript

reactjs

jsx

reactstrap