javascript - 输入未改变状态 REACTJS

Question

输入不会改变其文本。它是从数据库中预先填充的。例如，如果它带有文本:example，如果我按 s 键，它会在 DOM 中控制台记录 examples仍然是示例。这是句柄代码:

handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
    console.log(event.target.name);
    console.log(event.target.value);
  };

和输入字段:

<input 
  type="text" 
  className="form-control" 
  name="note" 
  id=" note" 
  value={this.state.insurance.note} 
  onChange={this.handleChange}
/>

编辑(修复了渲染问题，但提交表单时没有获得所需的数据)这是我的表单的代码:

handleSubmit = event => {
    event.preventDefault();
    var state = this.state;
    axios
      .put(`${API_URL}/` + state.id + `/update`, {
        tip: state.tip,
        date_exp: state.date_exp,
        date_notif: state.date_notif,
        note: state.note
      })
      .then(response => {
        console.log(response.data);
        // window.location = "/view";
      })
      .catch(error => {
        console.log(error);
      });
  }

我的按钮是一个简单的提交按钮:

<button className="btn btn-success" type="submit">Save</button>

Answer 1

imjared 的答案是正确的:您的问题出在 handleChange 函数中，您错误地更新了状态。
该函数应该类似于以下函数:

handleChange = event => {
    const insurance = Object.assign({}, this.state.insurance);
    insurance[event.target.name] = event.target.value;

    this.setState({insurance});
  };

在函数的第一行中，您创建保存在状态中的当前对象insurance 的深拷贝。然后，更新复制的对象，最后更新状态。