withFormik :初始值更改时,更新 props.value
withFormik : On initial value change, update props.value
一旦初始道具发生变化,表单中的值就需要更新
export default withFormik({
mapPropsToValues: (props: Props) => {
return (
{
id: props.initialData.id,
name: props.initialData.name
}
);
},
handleSubmit: (values, { props: Props, setSubmitting }) => {
Props.submitHandler(values);
},
})(NewDatasourceForm);
在 mapPropsToValues
我可以得到新的 props
,但是表格中的值没有得到更新。
const NewDatasourceForm = (props) => {
const {
values,
touched,
errors,
isSubmitting,
setFieldValue,
handleSubmit,
handleChange,
handleBlur
} = props;
const _handleSelect = (selectDSChoice) => {
try {
setFieldValue('dataSourceType', selectDSChoice.value);
} catch (error) {
// tslint:disable-next-line:no-console
console.error(error);
}
};
return(
<form className="needs-validation was-validated p-5" onSubmit={handleSubmit}>
<div className="form-group">
<label>Name</label>
<input
className={`form-control`}
name="name"
type="text"
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
/>
</div>
</form>
);
};
https://codesandbox.io/s/k5w5qn94z7
感谢支持。
withFormik({
enableReinitialize: true,
mapPropsToValues: (props: Props) => {
添加 enableReinitialize: true,
解决了问题
一旦初始道具发生变化,表单中的值就需要更新
export default withFormik({
mapPropsToValues: (props: Props) => {
return (
{
id: props.initialData.id,
name: props.initialData.name
}
);
},
handleSubmit: (values, { props: Props, setSubmitting }) => {
Props.submitHandler(values);
},
})(NewDatasourceForm);
在 mapPropsToValues
我可以得到新的 props
,但是表格中的值没有得到更新。
const NewDatasourceForm = (props) => {
const {
values,
touched,
errors,
isSubmitting,
setFieldValue,
handleSubmit,
handleChange,
handleBlur
} = props;
const _handleSelect = (selectDSChoice) => {
try {
setFieldValue('dataSourceType', selectDSChoice.value);
} catch (error) {
// tslint:disable-next-line:no-console
console.error(error);
}
};
return(
<form className="needs-validation was-validated p-5" onSubmit={handleSubmit}>
<div className="form-group">
<label>Name</label>
<input
className={`form-control`}
name="name"
type="text"
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
/>
</div>
</form>
);
};
https://codesandbox.io/s/k5w5qn94z7
感谢支持。
withFormik({
enableReinitialize: true,
mapPropsToValues: (props: Props) => {
添加 enableReinitialize: true,
解决了问题