ReactJS и отключить / включить выбранное поле

Question

Я пытаюсь отключить / включить выбранное поле ввода для правок. До сих пор я делал это для всех полей одновременно как

constructor(props) {
    super(props);
    this.state = { disabled: true }
}
handleEdit() {
    this.setState( {disabled: !this.state.disabled} )
}

render(){
    return(
        <div className="col-md-3"><label>First Name</label></div>
        <div className="col-md-6">
        <input
            type="text"
            className="form-control react-form-input"
            id="fname"
            name="fname"
            disabled={(this.state.disabled)? "disabled" : ""}
        />
        <i className="fas fa-edit" onClick = {this.handleEdit.bind(this)}></i>
        </div>
        </div>
        <div className="col-md-3"><label>Last Name</label></div>
        <div className="col-md-6">
        <input
            type="text"
            className="form-control react-form-input"
            id="lname"
            name="lname"
            disabled={(this.state.disabled)? "disabled" : ""}
        />
        <i className="fas fa-edit" onClick = {this.handleEdit.bind(this)}></i>
        </div>
       )}

, но затем я хочу редактировать только выбранное поле на основе идентификатора элемента. Я попытался переключить его для обработки как event.target.id, но это не сработало вообще.

Есть какие-нибудь советы по этому вопросу?

Answer 1

Вы можете сохранить редактируемые состояния каждого входа в объекте:

state = {
  editable: {}
};

handleEdit = id => {
  this.setState(({ editable }) => ({
    editable: { ...editable, [id]: !editable[id] }
  }));
};

render() {
  return (
    <div>
      <div className="col-md-3">
        <label>First Name</label>
      </div>
      <div className="col-md-6">
        <input
          type="text"
          className="form-control react-form-input"
          id="fname"
          name="fname"
          disabled={!this.state.editable.fname}
        />
        <i className="fa fa-edit" onClick={() => this.handleEdit("fname")} />
      </div>
      <div className="col-md-3">
        <label>Last Name</label>
      </div>
      <div className="col-md-6">
        <input
          type="text"
          className="form-control react-form-input"
          id="lname"
          name="lname"
          disabled={!this.state.editable.lname}
        />
        <i className="fa fa-edit" onClick={() => this.handleEdit("lname")} />
      </div>
    </div>
  );
}

Рабочий пример:

Answer 2

Я нашел рабочее решение для своего кода на основе предложения @trixn:

constructor(props) {
    super(props);
    this.state = { }
}
handleEdit(id) {
        let setEdit = this.state[id];
        this.setState( {[id]: !setEdit});
}

render(){
    return(
        <div className="col-md-3"><label>First Name</label></div>
        <div className="col-md-6">
        <input
            type="text"
            className="form-control react-form-input"
            id="fname"
            name="fname"
            disabled={!this.state.fname}
        />
        <i className="fas fa-edit" onClick = {() => this.handleEdit('fname')}></i>
        </div>
        </div>
        <div className="col-md-3"><label>Last Name</label></div>
        <div className="col-md-6">
        <input
            type="text"
            className="form-control react-form-input"
            id="lname"
            name="lname"
            disabled={!this.state.lname}
        />
        <i className="fas fa-edit" onClick = {() => this.handleEdit('lname')}></i>
        </div>
       )}

Answer 3

Вы можете создать компонент, который инкапсулирует состояние редактирования

function EditableField(props) {
  const [editing, setEditing] = React.useState(false);

  function toggleEditing() {
    setEditing(currentState => !currentState);
  }

  return (
    <div>
      <label>{props.label}</label>
      <input 
        value={props.value} 
        onChange={props.onChange}
        disabled={props.disabled || !editing}
      />
      <button onClick={toggleEditing}>
        {editing ? 'Save' : 'Edit'}
      </button>
    </div>
  )
}

Демо

function EditableField(props) {
  const [editing, setEditing] = React.useState(false);
  
  function toggleEditing() {
    setEditing(currentState => !currentState);
  }
  
  return (
    <div>
      <label>{props.label}</label>
      <input 
        value={props.value} 
        onChange={props.onChange}
        disabled={props.disabled || !editing}
      />
      <button onClick={toggleEditing}>
        {editing ? 'Save' : 'Edit'}
      </button>
    </div>
  )
}

EditableField.defaultProps = {
  editing: false,
  disabled: false
}

function App() {
  return (
    <div>
      <EditableField label="FirstName"/>
      <EditableField label="LastName"/>
    </div>
  );
}

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>