我無法清除提交表單上的輸入

而且還使用語義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

感謝您的幫助。我解決了這個問題。上面解釋的細節。 –

我無法清除提交表單上的輸入

回答

相關問題