React我无法更改输入字段的值（如果它具有值）和onChange

Question

I have a CRUD application, in my component's state I save the name of the user. Now the problem is: I have an input field for name in my form and when the user clicks on update user from the list, the selected user's name will appear on the input field and then I'm unable to change the name because the input field won't let me. I delete a letter and it reappears automatically, how can I fix this?

In my component's render method:

 <div className="col-sm-9">
      <div className="form-check">
          <input name="user_name" ref="user_name" className="form-check-input" type="checkbox" value="1" id="user_name"
                 value={this.state.user_name} onChange={this.onChange} />          
      </div>
  </div>

Outside my render method:

onChange(e) {
    this.setState({[e.target.name]: e.target.value})
}

Answer 1

Have you bind your onChange method(i suppose that is the issue, that your state is not getting updated). If not, then : try changing to this :

onChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
}

Or to this :

<div className="col-sm-9">
      <div className="form-check">
          <input name="user_name" ref="user_name" className="form-check-input" type="checkbox" value="1" id="user_name"
                 value={this.state.user_name} onChange={this.onChange.bind(this)} />          
      </div>
  </div>