Вам нужно будет создать специальный компонент, который будет помещен внутри Field формы redux-form, в котором вы храните внутреннее состояние, и синхронизировать его с formReducer, когда захотите.
Вы можете добиться этого за пару шагов:
Создайте пользовательский компонент для использования внутри Field. В этот компонент вводится с meta и input prop .
Создайте свой state для своего компонента React, в котором вы будете отслеживать данные, которые вы в конечном итоге отправите в formReducer.
В конструкторе используйте props.input.value, чтобы установить начальное состояние. Если вы сделаете это, вы можете использовать объект initialValues для своего reduxForm.
Используйте connect от react-redux, чтобы можно было использовать создателей действий react-form. В вашем случае вы будете использовать change action creator < / а>.
Создайте свою функцию рендеринга с вашим полем ввода и активируйте действие change, чтобы изменить значение вашего formReducer для этого поля.
Это сводится примерно к следующему:
<Field
name="daysPerWeek"
component={MyCustomComponent} // 1
/>
...
class MyCustomComponent {
constructor(props) {
super(props);
this.state = {
value: props.input.value, // 2 and 3
}
}
....
}
4:
import { connect } from 'react-redux';
import { change } from 'react-form';
const mapDispatchToProps = (dispatch, ownProps) => ({
ourCustomChange: (value) => dispatch(change(ownProps.meta.form, ownProps.input.name, value))
})
export default connect(undefined, mapDispatchToProps)(MyCustomComponent);
5:
....
componentDidUpdate(prevProps, prevState) {
if (prevState.value !== this.state.value) {
this.debounceAndEmit();
}
}
debounceAndEmit() {
// Debounce for some time. Maybe use:
// import { debounce } from 'throttle-debounce';
// for that:
debounce(2000, () => {
this.props.ourCustomChange(this.state.value)
})
}
handleChange(event) {
// Do things here like trimming the string, regex, whatever.
this.setState({ value: event.target.value })
}
render() {
return (
<input
{...this.props.input} // Includes standard redux-form bindings for input fields.
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
)
}
....
В некоторых случаях вам может потребоваться использовать и создатель действия размытия. Например, когда вы делаете что-то при нажатии вне поля ввода.
Если вы хотите, чтобы поля формы менялись в зависимости от других полей, вы должны использовать селекторы, чтобы вставить свои значения в ваш пользовательский компонент, чтобы отреагировать на это.
Отвечает ли это на ваш вопрос?
person
Alserda
schedule
22.10.2018
