时间戳

首页 > 解决方案 > React 输入框不再起作用

reactjs - React 输入框不再起作用

问题描述

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

以下代码有效

 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>
    )
  }

输入框不再起作用。为什么会这样，我该如何改变它？

标签： reactjsobjectinput

解决方案

如果你要做出这些改变，你也需要改变你onChangeMovie的

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

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

推荐阅读