我无法清除提交表单时的输入答案

【问题标题】：I cannot clear input on submitting form我无法清除提交表单时的输入
【发布时间】：2017-08-15 07:14:49
【问题描述】：

我正在使用 reactJs 和 redux-form。

并且还使用 semantic ui react 库

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

不幸的是，我无法清除我的输入，而我将状态设置为无效值。

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

提交表单后该字段保持填写状态。

有什么建议吗？谢谢

【问题讨论】：

我不知道语义 ui 是如何工作的，但是您正在更改该字段的 defaultValue。尝试将input 值设置为this.state.input，而不是defaultValue，或者Field 组件的value（如果有的话）。
谢谢。解决了。你说得对，value 比defaultValue 更合适，但Field 组件不能识别value 属性，所以要完成这项工作，我需要通过自定义fieldValue 属性传递它。

标签： reactjs semantic-ui redux-form

【解决方案1】：

您创建的是一个不受控制的组件，这意味着必须通过 DOM 来处理更新。为此，您需要添加 refattribute 以访问表单提交回调中的 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。

【讨论】：

感谢您的帮助。我解决了这个问题。上面解释了详细信息。

【解决方案2】：

我遇到了类似的问题，我想在单击提交按钮并使用功能组件后清除输入。这是提交后如何重置输入字段值的示例。将input 的值设置为state value & 当状态值被重置时输入字段被重置并且该字段为空。

const [cancelInput, setCancelInput] = useState('');

const inputChange = (event, data) => {
  // console.log(data)
  setCancelInput(data.value)
}

const handleClick = (e) => {
  setCancelInput(e.target.value)
}

<Input onChange={inputChange} placeholder='Type cancel here' value={cancelInput}/>
<Button color='red' onClick={handleClick} disabled={cancelInput !== 'cancel'} loading={loading} >Cancel</Button>

【讨论】：