ReactJS 和禁用/启用选定的字段答案

【问题标题】：ReactJS and disable/enable selected fieldReactJS 和禁用/启用选定的字段
【发布时间】：2020-03-03 16:57:50
【问题描述】：

我正在尝试禁用/启用选定的输入字段以进行编辑。到目前为止，我已经一次性完成了所有领域的工作

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>
       )}

但是我想根据元素 ID 仅编辑选定的字段。我试图将其切换为event.target.id，但这根本不起作用。

关于这件事有什么建议吗？

【问题讨论】：

更好的方法是将输入和编辑按钮移动到具有单独状态的单独组件中。
@demkovych 我一开始就在考虑它，但我是在表单级别的组件上看的，而不仅仅是选定的字段。我被父组件卡住了，因为我只有一个提交按钮才能提交多个表单

标签： reactjs forms input

【解决方案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>
  );
}

工作示例：

【讨论】：

好吧。我认为代码无效。我将在第一次单击时将状态设置为空，而不是 onClick 提供的状态，然后状态不会在另一个 onClick 上更新同一元素 id
@JackTheKnife 我忘记了handleEdit 中id 周围的方括号。它现在应该可以工作了。工作示例：codesandbox.io/s/exciting-nobel-b2k8p

【解决方案2】：

可以创建一个封装编辑状态的组件

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>

【讨论】：

当表单提交在编辑按钮禁用时完成但不是一次提交整个（多个表单）时，该解决方案很好。
表单是指<form> 元素还是输入？
是的 - 我在父级中有多个 <form> 组件。

【解决方案3】：

我根据@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>
       )}

【讨论】：