ReactJS 和禁用/启用所选字段

Question

I'm trying to have disabled/enabled selected input field for edits.我正在尝试禁用/启用选定的输入字段以进行编辑。 So far I have it done for all fields at once as到目前为止，我已经一次为所有领域完成了

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

but then I want to edit only selected field based on the element ID.但后来我只想根据元素 ID 编辑选定的字段。 I have tried to switch it to handle as an event.target.id but that wasn't working at all.我试图将其切换为event.target.id处理，但这根本不起作用。

Any tips on that matter?关于这件事的任何提示？

Answer 1

You can store the editable states of each input in an object:您可以将每个输入的可编辑状态存储在一个对象中：

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

Working Example:工作示例：

Answer 2

You can create a component that encapsulates the editing state可以创建封装编辑状态的组件

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

Demo演示

 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>

Answer 3

I have came up with working solution for my code based on @trixn suggestion:我根据@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>
       )}

ReactJS 和禁用/启用所选字段

问题描述

3 个解决方案

解决方案1
1 已采纳 2020-03-03 17:15:12

解决方案2
0 2020-03-03 17:18:00

解决方案3
0 2020-03-03 21:15:34

ReactJS 和禁用/启用所选字段

问题描述

3 个解决方案

解决方案1 1 已采纳 2020-03-03 17:15:12

解决方案2 0 2020-03-03 17:18:00

解决方案3 0 2020-03-03 21:15:34

解决方案1
1 已采纳 2020-03-03 17:15:12

解决方案2
0 2020-03-03 17:18:00

解决方案3
0 2020-03-03 21:15:34