Question

我有以下代码：

  handleTextChange = (e) => {

    this.setState({
        [e.target.name] : e.target.value
    })

  }

  render() {
    return (
      <div>
        <h1>Add Movie</h1>
        <input type="text" name="name" onChange={this.handleTextChange} placeholder="Enter movie name" />
        <input type="text" name="year" onChange={this.handleTextChange} placeholder= "Enter movie year" />

无论何时键入状态，都会根据输入字段的名称创建一个新属性，并在文本框中分配值。效果很好，我最终得到：

state = {
  name : "Movie Name", 
  year : "1992"
}

我怎么能得到这样的结果：

state = {

    movie: { 
     name : "Movie Name", 
     year : "1992"
} 
}

Answer 1

您只想将其设置为具有静态名称的对象？

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

PS您的初始状态应为movie: {}，否则价差将引发异常。

onChange React将值移入对象

1 个答案: