在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中设置/清除输入

回答

相关问题