Как сбросить начальное значение в форме redux

Я использую redux-форму. Я показываю начальные значения в полях ввода из состояния. Когда я нажимаю на сброс, поле ввода все еще показывает начальные значения.

Как я могу сбросить поле ввода?

Это мой код :

const mapStateToProps = (state) => {
    return {
        initialValues: {
            name:state.userInfo.data.name,
            email:state.userInfo.data.email,
            phone:state.userInfo.data.phone,
            city:state.userInfo.data.city.name,
        }
    };
}

вот как я вызываю начальное значение в поле ввода.

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div>
        <input className="form-control control_new" {...input} placeholder={label} type={type}/>
    {touched && ((error && <span>{error}</span>))}
    </div>
)

<Field type="text" {...name} name="name" component={renderField} label="Enter Your Name" />

спасибо

7
reactjs redux redux-form

4 ответов

ответ Харши правильный, но вы также можете позвонить this.props.reset(), который уже знает ваше имя формы, изнутри вашего украшенного компонента формы.

вы можете увидеть его в действии на кнопке "Очистить значения" в Простой Пример:.

8

TLDR: set enableReinitialize: true в форме

недавно у меня была такая же проблема, и я наткнулся на этот пост, ни один из ответов не работал. Наконец-то нашел решение, так что, надеюсь, это поможет кому-то еще. проблема в том, что эти начальные значения не сбрасываются при сбросе формы. вот это выпуск github спрашивая об этом, а вот то текущая документация об этом

9
import {reset} from 'redux-form';

...

dispatch(reset('myForm'));  // requires form name
2

при нажатии кнопки clear вызовите другую функцию следующим образом.

onClick={this.onClearChanges}

передайте initialValues функции таким образом, и, как все упоминалось, не забудьте установить enableReinitialize: true.

onClearChanges = () => {
  const { reset, onClearChanges, InitialValues } = this.props;
  reset();
  onClearChanges(InitialValues);
};
0