Мы используем FormSpy, подписаны на грязные.Функция OnChange в FormSpy будет обновлять грязный тег в избыточном, если грязный имеет значение true.Когда я набираю любое поле ввода, первая буква не отображается, но состояние избыточности обновляется с dirty:true при первой букве.
Также форма записывается в другом файле с использованием
<Form
component={Theform}
/>
Так мы использовали FormSpy
<FormSpy
subscription={{ dirty: true }}
onChange={state => this.updateDirty(state.dirty)}
{...props}
/>
updateDirty(isDirty) {
const { toggleIsDirty, dirtyState } = this.props;
if (isDirty) {
if (!dirtyState.isDirty) {
toggleIsDirty();
}
}
}
Когда проверка if (isDirty) не выполнена, она обновляет значение хранилища, но ничего не показывает в поле ввода.Куда мы пошли не так?
Обновление : я не могу скопировать и вставить фактический код, но вот как это выглядит.
Action.js
const toggleDirty = () => ({
type: types.TOGGLE_DIRTY,
});
export { toggleDirty };
Reducer.js
const dirtyState = (state = { isDirty: false}, { type }) => {
switch (type) {
case types.TOGGLE__DIRTY: {
return {
isDirty: !state.isDirty,
};
}
default: return state;
}
};
Modal.jsx
class Modal extends Component {
render () {
const {storeValues} = this.props;
const initialValues = {
field1: storeValue.field1,
field2: storeValue.field2
}
return {
<Form
id="detailsForm"
initialValues={initialValues}
component={DetailsForm}
/>
}
}
}
const mapStateToProps = ({ storeValues }) => ({
storeValues,
});
export default connect(mapStateToProps, null)(Modal);
DetailsForm.jsx
class DetailsForm extends Component {
constructor(props) {
super(props);
this.updateDirty = this.updateDirty.bind(this);
}
updateDirty(isDirty) {
const { toggleIsDirty, dirtyState } = this.props;
if (isDirty && !dirtyState.isDirty) {
toggleIsDirty();
}
}
render() {
const {updateDirty} = this;
const {
intl, submitError, submitErrors, submitFailed, dirty, handleSubmit, form, errors, values, ...props
} = this.props;
return{
<form onSubmit={handleSubmit} className="benefit-form">
<FormSpy
subscription={{ dirty: true }}
onChange={state => updateDirty(state.dirty)}
{...props}
/>
<React.Fragment>
<Input .... />
</React.Fragment>
</form>
}
}
}
const mapStateToProps = ({ dirtyState}) => ({
dirtyState,
});
const mapDispatchToProps = dispatch => ({
toggleIsDirty() {
dispatch(toggleDirty());
},
});
export default connect(mapStateToProps, mapDispatchToProps)(DetailsForm);
Когда я набираю что-то вроде '123' вна входе отображается только «23».Когда я набираю первое число, оно просто превращает флаг isDirty в значение true в магазине.При отладке я обнаружил, что updateDirty вызывается дважды для первого символа ввода - один раз с isDirty как true и снова как false.
Я помещаю consolelog в onChange FormSpy, и он запускается во времяначальная форма загрузки с dirty как false.И когда я набираю первую букву, она обновляется до true, действие отправляется, а затем сразу же запускается снова с false.Письмо тогда не отображается.Но со второй буквы это действует нормально.Это работает без каких-либо проблем, когда я использую локальное состояние и setState вместо отправки.
Мы используем этот флаг для отображения модального режима при переходе со страницы с грязными данными.