javascript - 为什么我的 react 表单无法在codesandbox上运行

Question

我在这里创建了一个简单的表单https://codesandbox.io/s/xenodochial-frog-7squw

它说您在没有 onChange 处理程序的情况下向表单字段提供了 value 属性。这将呈现一个只读字段。如果该字段应该是可变的，请使用 defaultValue。

但是有一个 onChange 处理程序被传递，所以我不明白。此外，当我点击提交时，页面会重新加载，即使调用了 PreventDefault()

谢谢

Answer 1

问题是这一行:

const { str, handleChange, handleSubmit } = this.state;

handleChange 和 handleSubmit 不是状态的一部分，而是实例方法，因此您可以像这样传递它们:

    return (
      <div className="App">
        <Form str={str} onChange={this.handleChange} onSubmit={this.handleSubmit} />
        <Table />
      </div>
    );