redux-form重置时，react-select不清除值
redux-form重置时，react-select不清除值
提问于 2018-06-01 17:58:09
我有一个无状态的React函数来呈现react-select Select to a form。除了redux-form被重置之外，其他一切都可以很好地使用redux-form。我需要在成功发布后手动重置表单。
当选择值发生更改时，onChange和onBlur会正确地更改redux-Form值。当我重置redux-form时，redux-form值被清除，但Select将具有旧值。
function SelectInput(props) {
const { input, options, label } = props;
const { onChange, onBlur } = input;
const handleChange = ({ value }) => {
onChange(value);
};
const handleBlur = ({ value }) => {
onBlur(value);
};
return (
<FormField {...props}>
<Select placeholder={label} options={options} onChange={handleChange} onBlur={handleBlur} />
</FormField>
);
}我将SelectInput转换为React.PureComponent，并将值作为组件内部的状态添加，并在组件收到新属性时进行查找：
constructor(props) {
super(props);
this.state = {value: ''}
}
componentWillReceiveProps(nextProps){
this.setState({value: nextprops.input.value})
}
<Select value={this.state.value} placeholder={label} options={options} onChange={handleChange} onBlur={handleBlur} />使用此选择根本无法显示该值。
问题是，当这个字段所属的redux-form被重置时，我如何更新Select以显示空值？Redux-form会在redux状态中相应地重置值，如果我尝试提交表单，验证会通知Select的值为空。但是，Select将显示旧值，这样用户就会认为选择了一个值。
重置是通过在实际的redux-form组件中调度重置来完成的。Redux devtools显示字段被重置，redux状态从所有值中清除，Select component不会将显示的值更新为空。
const afterSubmit = (result, dispatch) =>
dispatch(reset('datainputform'));
export default reduxForm({
form: 'datainputform',
onSubmitSuccess: afterSubmit,
})(DataInputForm);我使用的版本：
- react-select@v2.0.0-beta.6
- redux-form@7.3.0
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50640858
复制相关文章
相似问题
腾讯云开发者
