使用表单修改值

Question

我正在创建一个表单来修改我从上一页获取的值。

我不明白的是如何在状态中保存数据。

这是我的代码：

    class ModifyPerson extends Component {
    constructor(props){
    super(props);
    this.state = {
    firstname: this.props.location.state.firstname,
    lastname: this.props.location.state.lastname
    //they come from react-router-dom
    }
    }

handleChange(event){
// There I don't understand how to save every field in the state. So if the user modify the field 
// I would to save the new state.
}

    render(){
    return(
    <form onSubmit={this.handleSubmit}>
     <div>
            <label>FirstName</label>
            <input
              type="text"
              name="firstname"
              placeholder={this.state.firstname}
              value={this.state.firstname}
              onChange={(event) => this.handleChange(event)}
            />

            <label>LastName</label>
            <input
              type="text"
              name="lastname"
              placeholder={this.state.lastname}
              value={this.state.lastname}
              onChange={(event) => this.handleChange(event)}
            />
<button type="button" className="btn btn-primary" type="submit" value="Submit">Send</button>
    </form>
    )}
    }

我想要获得什么:如果用户更改了我想保存在新状态中的字段，如果没有，状态将保持与我在构造函数状态中初始化的状态相同。我该怎么做呢？

Answer 1

您必须使用setState

handleChange(event){
  this.setState({
    [event.target.name]: event.target.value
  })
}

和handleSubmit

handleSubmit = e => {
  e.preventDefault();
  console.log(this.state.firstname, this.state.lastname);
};