[英]React Formik : How to useEffect with formik values?
如果 formik 的值已更改,我想使用 useEffect 重新呈现字段。 但它不起作用..
实际上我创建了一个小例子来展示我的问题。 这里我有一个字段'title',如果这个字段发生了变化(当我们写进去时)它应该调用useEffect并打印'update!' 但它没有!
const FormikWidgetConfigurator = (props) => {
useEffect(() => {
// doesn't work if values has changed
console.log('update!')
}, [props.values]);
return (
<Form onSubmit={ props.handleSubmit } noValidate>
<Form.Group className='py-3' >
<Col md='6' style={{ padding: '0px' }}>
<Form.Group controlId='title'>
<Form.Control
type='text'
value={ props.values.title }
onChange={props.handleChange}
/>
</Form.Group>
</Col>
</Form.Group>
</Form>
)
}
const WidgetConfigurator = withFormik({
mapPropsToValues(props) {
return {
title: 'No Title'
};
},
validationSchema: props => Yup.object().shape({title: Yup.string()}),
handleSubmit(values, { setSubmitting }) {// handle submit}
})(FormikWidgetConfigurator);
export default WidgetConfigurator;
编辑:实际上它按预期工作。 (我没有改变任何东西)
谢谢!
这不是一个很好的解决方案,但我发现的一个技巧是在 Formik 表单内有一个不可见的按钮; 它可以访问 Formik 的所有属性,并将执行其onClick
中所需的任何逻辑。 然后从useEffect
您可以通过document.getElementById("..").click()
模拟该按钮的单击。
// Style it to be invisible
<Button id="testButton" type="button" onClick={() => {
setFieldValue('test', '123');
setTouched({});
// etc. any Formik action
}}>
</Button>
使用效果:
useEffect(() => {
document.getElementById("testButton").click(); // Simulate click
}, [dependency);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.