Реактивное поле ввода больше не работает

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, а затем перезапишет заголовок / просмотренный файл.