输入字段取值 state 无法修改

Question

I cannot modify input predefined value.

constructor(props) {
super(props);
this.state = {
  userDetails: this.props.location.state.userDetails,
  token: "",
  firstName: "",
  lastName: "",
  email: "",
  roles: []
};

This is the method that I use for handling input:

handleInputChange = (e) => {
const target = e.target;
const value = target.value;
const name = target.name;
this.setState = {
  [name]: value,
};

};

This is the input element:

 <input
  type="text"
  value={this.state.userDetails.firstName}
  name="firstName"
  ref="firstName"
  onChange={this.handleInputChange}
 />

In the UI I cannot delete its(input) default value taken from the state neither type something else. If I comment the value this problem disappears.

What am I doing wrong in this case?

Answer 1

<input> element always reads its value from this.state.userDetails.firstName , which doesn't change.

Because of that, <input> 's value has to be firstName :

<input
  type="text"
  value={this.state.firstName}
  ...

Then you can, for instance, set firstName: this.props.location.state.userDetails.firstName as default value on first render.