すべての入力が記入されるとすぐにフォームを提出する方法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ハンドラを割り当てます。すべての変更で、入力状態変数の状態を設定します。 4つの状態変数のすべての値が設定されている場合は、handleSubmit関数を呼び出します。以下はsamppleスニペットです。

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>

Answer 2

各入力に参照を追加します。コンポーネントの内部には、準備が整った状態があります。最後の入力が満たされ、その他すべてが満たされたときにfalseにして真にします。状態の準備が整ったときにのみONになるアクションを作成します。

refでは、各入力に値があるかどうかを確認できます。最初のものに値がない場合、他の入力を無効にします。だから、あなたはあなたがあなたのものを持って知っている最後のものに来たときに、満たされたものを追跡して見ることができます。

あなたが与える細かいディテールで、私はあなたに役立つアイデアの希望を手伝っています。