Question

我正在构建一个非常基本的React应用程序但是在表单输入方面存在一些问题：我的州：

class App extends Component {
    constructor(){
    super();
    this.state = {
    books: [],
    book:{
      author:"",
    title: ""
   }
  }
  this.handleInputChange = this.handleInputChange.bind(this)
 }

我的表格：

<form onSubmit={this.addBook}>
          <input
            name="author"
            type="text"
            placeholder="author"
            value={this.state.book.author}
            onChange={this.handleInputChange}
          /><br/>
          <input
            name="title"
            type="text"
            placeholder="title"
            value={this.state.book.title}
            onChange={this.handleInputChange}
          /><br/>
          <input type="submit" />
          <button>Update</button>
          <button>Delete</button>
        </form>

我的事件处理程序：

handleInputChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

我仍然无法在输入字段中进行数字处理。当我尝试数字值时没有任何反应，输入字段没有正确更新。有什么建议？感谢

Answer 1

您的图书状态是state.book.title和state.book.author，因此您需要在setState中指定您要使用event.target.value更新的state.book对象。

希望这可以解决问题：

handleInputChange(event) {
  this.setState({
    book: {
    ...this.state.book,
    [event.target.name]: event.target.value
    },
  });
}

更新嵌套图书对象的状态时，需要复制它，但要将要更改的属性设置为新值。这是省略号符号所帮助的。

此处有更多信息：How do I setState for nested array?

Answer 2

标题/作者属性在书籍对象中。看起来您只是引用state.author或state.title，但您需要引用state.book.title或state.book.author。试试这个：

handleInputChange(event) {
    this.setState({
      book[event.target.name]: event.target.value
    });
  }

输入元素未在React中更新

2 个答案: