javascript - withFormik : On initial value change, 更新 props.value

标签 javascript forms reactjs typescript formik

一旦初始 Prop 发生变化,表单中的值就需要更新

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,解决了问题

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

关于javascript - withFormik : On initial value change, 更新 props.value,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49491110/

相关文章:

javascript - 如何停止 JSF 重新加载页面 "onclick"?

javascript - cron 作业 node.js : job is repeating infinitely

javascript - 在 jQuery 中使用 on() 时,如何使用带参数的函数作为处理程序?

php - php同时获取复选框id和值

javascript - 如何获取值作为类型并将其添加到一个文本区域中?

javascript - 使用整页js的部分内部水平滚动

css - 用更少的循环优化 css?

javascript - React 不会重新渲染

javascript - ESLint 未检测到导入的 React 组件

javascript - redux-form - 仅提交编辑过的字段