Пользовательские обработчики изменений со входами внутри Formik - PullRequest
Новая
       20

Пользовательские обработчики изменений со входами внутри Formik

0 голосов
/ 12 июня 2019

Я портирую некоторые свои формы, созданные с помощью SUIR , на реализацию Formik .У меня есть компоненты ввода, которые нуждаются в пользовательских обработчиках изменений для выполнения действий.Как я могу передать свой обработчик изменений в onChange реквизит, чтобы значения отслеживались formik?

Я пробовал что-то подобное, но безуспешно. 

onChange={e => setFieldValue(dataSchemaName, e)}

, которыйупоминается в другом посте здесь .

Здесь также упоминается здесь , но я не совсем могу заставить свой обработчик пользовательских изменений красиво соединиться с Formik.

Мой обработчик изменений выглядит следующим образом 

handleSchemaChange = (e, { value }) => {
  this.setState({ dataSchemaName: value }, () => {
     console.log("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.log(response);
      this.setState({
        fields: response.data.data.fields,
      });
      console.log(this.state.fields);
    })
    .catch(error => console.log(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>

У меня есть песочница с вопросом

1 Ответ

1 голос
/ 14 июня 2019

Вы можете передать функцию 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

...