Reactjs 反应输入框不再工作

我是一个新的反应者，当我将状态从变量更改为对象时，输入框将不再工作

下面的代码可以工作

 class AddMovie extends Component {

  state = {
    title: "",
    watched: ""
  }

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

  uploadMovie = (e) => {
    e.preventDefault();
    this.props.addMovie(this.state.title, this.state.watched);
    this.setState({title: "", watched: ""})
  }
  render(){
    return (
      <form onSubmit={this.uploadMovie}>
        <div className="form-group">
          <label>Movie Title</label>
          <input type="text" className="form-control"  placeholder="Enter title"
          name="title" value={this.state.title} onChange={this.onChangeMovie}/>
        </div>
        <div className="form-group">
          <label>Date Watched</label>
          <input type="date" className="form-control"
          name="watched" value={this.state.watched} onChange={this.onChangeMovie}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    )
  }
}

export default AddMovie;

我改变了表单来添加对象

  render(){
    return (
      <form onSubmit={this.uploadMovie}>
        <div className="form-group">
          <label>Movie Title</label>
          <input type="text" className="form-control"  placeholder="Enter title"
          name="title" value={this.state.movieUpload.title} onChange={this.onChangeMovie}/>
        </div>
        <div className="form-group">
          <label>Date Watched</label>
          <input type="date" className="form-control"
          name="watched" value={this.state.movieUpload.watched} onChange={this.onChangeMovie}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    )
  }

render（）{
返回(
电影名称
观看的约会
提交
)
}

---

输入框不再工作。这是为什么？我如何更改它？

如果您要进行这些更改，您还需要更改您的

onChangeMovie

onChangeMovie = (e) => {
  this.setState({uploadMovie: {...this.state.uploadMovie, [e.target.name] : e.target.value}});
}

---

这将复制当前的

This.state.uploadMovie

，然后覆盖标题/观看的内容。

是否根据新的状态形状更改

onChangeMovie

方法？@devserkan我没有。我该怎么做才能改变它呢？看看我的评论就知道答案了。我刚才给出了答案，但这是一个很接近的答案。我建议在这里使用functional

setState

，因为我们依赖于

movieUpload

的旧值。比如：

onchangemvie=e=>{const{target}=e；this.setState（prevState=>（{movieUpload:{…prevState.movieUpload，[target.name]：target.value}}））；}
onChangeMovie = (e) => {
  this.setState({uploadMovie: {...this.state.uploadMovie, [e.target.name] : e.target.value}});
}