如何在 React 中填写所有输入后立即提交表单？

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函数。下面是示例片段。

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'));

<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>