我无法清除提交表单上的输入

而且还使用语义UI反应库

时，我想提出我的形式，我不希望我的页面被刷新。相反，我想在提交后重置我的表单。

不幸的是，我不能清除我的输入，而我设置状态以使值无效。

/** Form component **/ 
 

 
<Form onSubmit={handleSubmit(this.handleSubmitAction)}> 
 
     <Field name="input" component={renderTitleInput} onChangeAction={this.handleInputChange} defaultValue={this.state.input} /> 
 
      <input type="submit" name="submit" /> 
 
     </Form> 
 
     
 
     
 
     
 
/** HandleSubmit function **/ 
 

 
handleSubmitAction = (e) => { 
 
    this.setState({input:''}) 
 
}

现场递交表格后保持充满。

有什么建议吗？谢谢

来源

2017-08-15 John doe

我不知道语义UI如何工作，但是你正在改变字段的'defaultValue'。尝试将'input'值设置为'this.state.input'，而不是'defaultValue'，或者'Field'组件的'value'（如果有的话）。 –

谢谢。它解决了。你是对的'value'比'defaultValue'更合适，但'Field'组件不会识别'value'属性，所以为了得到这个工作我需要通过一个自定义的'fieldValue'属性来传递它。 –

您创建的是一个不受控制的组件，这意味着必须通过DOM处理更新。要做到这一点，您需要添加ref属性以获取表单提交回调中的DOM元素。这是你需要做的改变。

<Form onSubmit={handleSubmit(this.handleSubmitAction)}> 
    <Field name="input" component={renderTitleInput} onChangeAction={this.handleInputChange} defaultValue={this.state.input} ref={(input) => this.input = input} /> 
     <input type="submit" name="submit" /> 
</Form> 
/** HandleSubmit function **/ 

handleSubmitAction = (e) => { 
    // This can be used when using controlled component. 
    //this.setState({input:''}) 
    this.input.val = ''; 
}

但也许你想要的是处理它作为controlled component。

来源

2017-08-15 08:19:07 dama

感谢您的帮助。我解决了这个问题。上面解释的细节。 –

我无法清除提交表单上的输入

回答

相关问题