React 输入框不再起作用

Question

我是新手，当我将状态从变量更改为对象时，输入框不再起作用。

以下代码有效

 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;

当我将状态更改为对象时

  state ={
    movieUpload: {
      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.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>
    )
  }

输入框不再起作用。为什么会这样？如何更改？

Answer 1

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

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

这将复制当前的this.state.uploadMovie，然后覆盖标题/观看。