withFormik:在初始值更改时,更新props.value

时间:2018-03-26 12:08:07

标签: javascript forms reactjs typescript formik

初始道具更改后,表格中的值需要更新

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 {         值         感动,         错误,         isSubmitting,         setFieldValue,         handleSubmit,         handleChange,         handleBlur     } =道具;

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>

https://codesandbox.io/s/k5w5qn94z7

感谢您的支持。

1 个答案:

答案 0 :(得分:15)

withFormik({
    enableReinitialize: true,
    mapPropsToValues: (props: Props) => {

添加enableReinitialize: true,解决了问题

https://github.com/jaredpalmer/formik/issues/168