React - 我是否必须向每个输入字段添加一个 onChange 事件处理程序以使输入字段不是只读的？

Question

我有一个简单的表格。如果我只有一个 onSubmit 事件处理程序，我的 inout 字段是只读的（我不想要）。当我向每个输入字段另外添加一个 onChange 事件处理程序时，它们不再是只读的。我的问题是：

1. 除了 onSubmit 之外，我是否必须始终添加 onChange 以便输入字段在 React 中不是只读的
2. 如果是这样，为什么？

3. 或者我只是在我的示例代码中做错了什么？谢谢

      class App extends React.Component {
           constructor(props){
               super(props);
               this.state={
                   name:''
               }
               this.testing=this.testing.bind(this);
           }
           testing(e){
               e.preventDefault();
               //axios call here, sending data/name
           }
   
           render () {
               return (
                   <div>
                       <form onSubmit={this.testing}>
                          <input name="name" value={this.state.name}/>
                       </form>
                   </div>
                   )
           }
       }
   

Answer 1

是的，你必须这样做。您将输入值绑定到 this.state.name 变量，并且您必须提供更改此值的方法。

你必须阅读 React 文档 https://reactjs.org/docs/forms.html#controlled-components

Answer 2

您为名称输入设置了值，它始终保持为this.state.name，即''。所以你必须控制它并添加一个 onChange（类似于this.setState({ name: event.target.value })）

如果您不想控制输入，只需删除该值，然后从您的状态中删除名称。

我建议你阅读controlled components in react docs

以下是控制组件如何提供帮助的示例：（清理输入值）

class App extends React.Component {
    constructor(props){
        super(props);
        this.state={
            name:''
        }
        this.testing=this.testing.bind(this);
    }
    testing(e){
        e.preventDefault();
        //axios call here, sending data/name
    }

    cleanUp(){
      this.setState({ name: "" });
    }

    render () {
        return (
            <div>
                <form onSubmit={this.testing}>
                   <input name="name" value={this.state.name} onChange={ (event) => this.setState({name: event.target.value})}/>
                   <div onClick={this.cleanUp.bind(this)>CleanUp</div>}
                </form>
            </div>
            )
    }
}