Reactjs 如何在填写完所有输入后立即提交表格？

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

handleSubmit（e）{
e、 预防默认值（）；
}
render（）{
返回(
)
}

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

---

如何实现这一点？

为每个输入添加一个引用。在组件内部有一个状态，您已经准备好了：false，并在最后一个输入已填充且所有其他输入都已填充时将其设置为true。仅当状态准备就绪时才执行启用的操作：true

使用ref可以查看每个输入是否有值。你也可以这样做，如果第一个输入没有值，它会禁用另一个输入。所以你可以追踪填充的东西，看看他们什么时候到最后一个你知道你得到了你的东西

---

通过您提供的少量详细信息，我只是想帮助您提出一个想法，希望能对您有所帮助。

为每个输入添加一个参考。在组件内部有一个状态，您已经准备好了：false，并在最后一个输入已填充且所有其他输入都已填充时将其设置为true。仅当状态准备就绪时才执行启用的操作：true

使用ref可以查看每个输入是否有值。你也可以这样做，如果第一个输入没有值，它会禁用另一个输入。所以你可以追踪填充的东西，看看他们什么时候到最后一个你知道你得到了你的东西

---

通过您提供的少量详细信息，我只是想帮助您提出一个想法，希望能对您有所帮助。

对于输入，请创建值属性状态，并为输入分配onchange处理程序。在每次更改时，设置输入状态变量的状态。如果设置了所有四个状态变量的值，则调用

handleSubmit

函数。下面是示例片段

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
}
}
handleSubmit（）{
log（“立即执行提交帐户”）；
}
手变（e）{
this.setState（{[e.target.id]：e.target.value}，函数（）{
var obj=此.state
var计数=0；
if（Object.keys（this.state）.length==4）{
Object.key（this.state）.forEach（function（key）{
如果（对象[键]！=''）{
计数++；
}
});
如果（计数=4）{
this.handleSubmit（）；
}
}
});
}
render（）{
返回(
)
}
}
ReactDOM.render（，document.getElementById（'app'））
为输入创建值属性状态，并为输入分配onchange处理程序。在每次更改时，设置输入状态变量的状态。如果设置了所有四个状态变量的值，则调用
handleSubmit
函数。下面是示例片段


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
}
}
handleSubmit（）{
log（“立即执行提交帐户”）；
}
手变（e）{
this.setState（{[e.target.id]：e.target.value}，函数（）{
var obj=此.state
var计数=0；
if（Object.keys（this.state）.length==4）{
Object.key（this.state）.forEach（function（key）{
如果（对象[键]！=''）{
计数++；
}
});
如果（计数=4）{
this.handleSubmit（）；
}
}
});
}
render（）{
返回(
)
}
}
ReactDOM.render（，document.getElementById（'app'））

/*如果输入自动填充*/
f1=React.createRef（）
componentDidUpdate（）{
this.f1.current.submit（）；
}
render（）{
返回(
)}
/*如果输入自动填充*/
f1=React.createRef（）
componentDidUpdate（）{
this.f1.current.submit（）；
}
render（）{
返回(
)}
你能再详细说明一下你所说的“填充所有输入”吗？当所有的字段都有一个值而没有一个焦点时，你认为所有字段都要填写吗？如果不是，你想如何确定用户填写了最后一个输入？@ FelixCalk，我认为当所有的字段都有一个值时要填写所有字段。我不太清楚你所说的没有焦点是什么意思。我想在每个输入都有一个值后提交一个表单。基本上，你怎么知道用户完成了输入？一旦用户输入了最后一个输入中的一个字符，您所接受的答案将提交表单。您能详细说明您认为“填充所有输入”的内容吗？当所有的字段都有一个值而没有一个焦点时，你认为所有字段都要填写吗？如果不是，你想如何确定用户填写了最后一个输入？@ FelixCalk，我认为当所有的字段都有一个值时要填写所有字段。我不太清楚你所说的没有焦点是什么意思。我想在每个输入都有一个值后提交一个表单。基本上，你怎么知道用户完成了输入？用户在最后一次输入中键入一个字符后，您接受的答案将立即提交表单。很好；）应该是他的答案谢谢你！好的；）应该是他的答案谢谢你！
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>
   )
}

/* 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>
)}