React - 我是否需要为每个输入字段添加一个onChange事件处理程序，以使输入字段不能只读？

Question

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

1. 我必须总是在另外添加一个onchange到的onsubmit所以如果这样的输入字段不只读的阵营
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变量，您必须提供更改此值的方法。

您必须阅读文档做出反应 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> 
      ) 
    } 
}