在Redux/React中設置/清除輸入

-1

我想知道如何在使用反應時通過重新連接在明確的字段中連線。例如，我有一個帶有一些示例代碼的表單。在Redux/React中設置/清除輸入

<Field component={datewidget} id ="date" name="date" type="date" label="date" /> 
<button type="button"onClick={() => {(clearMyInput());}}> 
</button>

功能clearMyInput被分派這樣的：

const mapDispatchToProps = (dispatch) => { 
    return { 
    clearMyInput:() => { 
     return dispatch(clearDate(datedata,value)); 
    } 
    } 
}

我的問題怎麼能夠通過簡單地點擊按鈕，將輸入設置爲無的值來清除輸入字段。

例如jQuery中，我可以寫這樣的事情：

$("#button").click(function() { 
    $("#date").val(""); 
});

我想知道一個人如何能做到這一點使用終極版的形式反應。

來源

2017-09-14 Jacklyn N

您是否需要將您的表單輸入存儲爲REDX？一般我建議只保留用戶輸入的字段或本地組件狀態，直到提交。如果您必須使用redux以便其他組件可以響應，那麼只要確保從redux狀態設置輸入的值，以便如果使用分派清除該狀態，輸入也將被清除。（或只是給該字段一個'ref'並用'refs.myInput.value ='''清除它） – glortho

不確定這是不是你要問的，但是這聽起來像你只是錯過了響應redux reducer到'clearDate'行動。通常情況下（如果您使用的是redux而不是本地狀態），您可以通過'connect'將商店中的值綁定到組件，然後調度'clearMyInput'動作。減速器會通過在商店中重置該值來作出響應，並且這將重置形式中的值。...... – mikebridge

'clearDate（datedata，value）' - 這些值來自哪裏？你的意思是'clearMyInput：（datedata，value）=> {'？ –

在您的Field的組件中，從您的商店傳遞屬性value並附加事件處理程序以分派更改。

<Field 
    component={datewidget} 
    id="date" 
    name="date" 
    type="date" 
    label="date" 
    value={this.props.fieldValue} 
    onChange={this.props.changeFieldValue} 
/>

然後用調度clearDate功能，你只需要對所有形式的值設置爲''。我建議查看Redux Form，這些都是沒有樣板的。

來源

2017-09-14 16:27:35

我想作爲補充添加到現有的答案，有內置的功能清除表單：

<button type="button" onClick={reset}> 
     Clear Values 
    </button>

通知的onClick行動在這裏處理。這是開箱即用Redux-Form

來源

2017-09-25 19:51:17

在Redux/React中設置/清除輸入

回答

相關問題