Question

输入内容不会更改为文本。它是从数据库中预先填充的。例如，如果它带有文本：example，例如，如果我按下s键，则它的控制台日志为examples，但在DOM中仍然为example。这是handle代码：

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

您正在根据输入的this.state.note属性来更改name，因此this.state.insurance.note不会看到任何更新是有道理的。

如果您尝试在this.state上方使用console.logging <input>，那么我敢打赌，您会看到您的所要。

Answer 2

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

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

    this.setState({insurance});
  };

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

输入未更改状态REACTJS

2 个答案: