带有 Formik 内部输入的自定义更改处理程序

Question

我正在移植我使用 SUIR over to a Formik 实现制作的一些表格。我有需要自定义更改处理程序来执行操作的输入组件。我怎样才能将我的更改处理程序传递给 onChange 道具，以便 formik 跟踪这些值？

我试过类似的方法，但没有成功。

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

其中提到的不同 post .

也提到了 here，但我不能完全让我的自定义更改处理程序与 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>

我有一个 sandbox 问题

Answer 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

带有 Formik 内部输入的自定义更改处理程序

Custom change handlers with inputs inside Formik

reactjs

formik