Пользовательские обработчики изменений с входными данными внутри Formik
Я переношу некоторые из своих форм, созданных с помощью СУИР, на реализацию Формик. У меня есть компоненты ввода, которым нужны настраиваемые обработчики изменений для выполнения действий. Как я могу передать свой обработчик изменений в реквизит onChange, чтобы значения отслеживались formik?
Я пробовал что-то подобное, но безуспешно.
onChange = {e => setFieldValue(dataSchemaName, e)}
который упоминается в другом посте здесь.
Также упоминается здесь, но я не могу заставить свой собственный обработчик изменений хорошо стыковаться с Formik.
Мой обработчик изменений выглядит так
handleSchemaChange = (e, { value }) => {
this.setState({ dataSchemaName: value }, () => {
console.info("Chosen dataSchema ---> ", this.state.dataSchemaName);
//also send a request the selfUri of the selected dataSchema
});
const schema = this.state.dataschemas.find(schema => schema.name === value);
if (schema) {
axios
.get(schema.selfUri)
.then(response => {
console.info(response);
this.setState({
fields: response.data.data.fields,
});
console.info(this.state.fields);
})
.catch(error => console.info(error.response));
}
};
Вот пример одного из моих полей формы с использованием раскрывающегося списка
<Form.Field>
<label style = {{ display: "block" }}>
Select a Schema
</label>
<Dropdown
id = "dataSchemaName"
multiple = {false}
options = {dataschemas.map(schema => {
return {
key: schema.id,
text: schema.name,
value: schema.name
};
})}
value = {dataSchemaName}
onChange = {this.handleSchemaChange}
/>
</Form.Field>
У меня песочница с проблемой
Я просто хочу использовать обработчики изменений, как если бы это были компоненты ввода обычной формы.
Вы не можете сделать это через formik. Лучше не использовать формик.
Я не уверен, что это совершенно верно.
Ответы 1
Вы можете передать функцию setFieldValue своей функции handleSchemaChange, а затем использовать ее внутри.
Итак, вместо onChange = {this.handleSchemaChange} сделайте это
onChange = {(e, val) => this.handleSchemaChange(e, val, setFieldValue)}.
И внутри вашей функции handleSchemaChange:
handleSchemaChange = (e, { value }, setFieldValue) => {
setFieldValue('dataSchemaName', value);
... the rest of your implementation
}
Вот песочница с реализованным решением: https://codesandbox.io/s/formik-create-query-schema-uq35f
Большое спасибо, это где-то в документах, где можно было бы дать ссылку?
Кроме этого jaredpalmer.com/formik/docs/api/… я в это не верю. Решение здесь: stackoverflow.com/questions/52271766/… был правильным, но в вашем случае он нуждался в этой настройке onChange = {(e, val) => setFieldValue('dataSchemaName', val.value)}, поскольку первым аргументом был объект события, а вторым был объект, возвращаемый из раскрывающегося списка Semantic-UI, который содержал значение, которое вам нужно было установить.
Итак, вы хотите предпринять какие-то действия при изменении определенного ввода, верно?