Question

我有一个这样的表格（简化）：

handleSubmit(e){
   e.preventDefault();
}
render(){
   return (
       <form onSubmit={this.handleSubmit.bind(this)}>
          <input type="text" maxLength="1"/>
          <input type="text" maxLength="1"/>
          <input type="text" maxLength="1"/>
          <input type="text" maxLength="1"/>
       </form>
   )
}

如您所见，没有提交表单的按钮，因为我想在用户填写所有输入时自动提交表单。
另外，为了清楚起见，我不试图找出如何使用回车键提交表单。

我怎样才能做到这一点？

Answer 1

对于输入创建值属性状态并为输入分配onchange处理程序。在每个更改设置输入状态变量的状态。如果设置了所有四个状态变量的值，则调用handleSubmit函数。以下是sampple片段。

＆＃13;

class App extends React.Component {

constructor() {
  super();
  this.state = {
    
  }
}
  handleSubmit(){
   console.log('Perform submit acction now');
}
  handleChange(e) {
   this.setState({[e.target.id]: e.target.value}, function() {
   var obj = this.state
   var count = 0;
   if(Object.keys(this.state).length == 4) {
   Object.keys(this.state).forEach(function(key){
     if(obj[key] !== '') {
       count++;
     }
   });
     if(count == 4) {
       this.handleSubmit();
     }
     }
});
  }
render(){
   return (
       <form ref="form1" onSubmit={this.handleSubmit.bind(this)}>
          <input type="text" id="inp1" maxLength="1" onChange={this.handleChange.bind(this)} value={this.state.inp1} />
          <input type="text" id="inp2" maxLength="1" onChange={this.handleChange.bind(this)} value={this.state.inp2}/>
          <input type="text" id="inp3" maxLength="1" onChange={this.handleChange.bind(this)} value={this.state.inp3}/>
          <input type="text" id="inp4" maxLength="1" onChange={this.handleChange.bind(this)} value={this.state.inp4}/>
       </form>
   )
}
}

ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

Answer 2

为每个输入添加一个引用。组件内部有一个你准备好的状态：false，当最后一个输入被填充并且所有其他输入被填充时，使其成为真。只有在状态就绪时才进行操作：true。

使用参考，您可以看到每个输入是否有值。如果第一个输入没有值，那么你可以做的就是禁用另一个输入。所以你可以跟踪填充的东西，看看他们什么时候来到最后一个你知道你得到了你的东西。

只要您提供少量细节，我就会尽力帮助您，希望能为您提供帮助。

Answer 3

/* if inputs are automatically filled*/ 
f1=React.createRef()  
componentDidUpdate() {
     this.f1.current.submit();
}
render() {
return (<React.Fragment>
<Form action="localhost/bla-bla" method="POST" ref={this.f1}>
    <Form.Control type="text" value="hello"/>
</Form>
</React.Fragment>
)}

如果所有输入都填写在React中，如何提交表格？

3 个答案: