我要将我使用SUIR制作的一些表单移植到Formik实现中。我有一些需要自定义更改处理程序才能执行操作的输入组件。如何将我的变更处理程序传递给onChange
道具,以便由formik跟踪值?
我已经尝试过类似的方法,但是没有运气。
onChange={e => setFieldValue(dataSchemaName, e)}
在另一则帖子here中提到。
还提到了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问题
答案 0 :(得分: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