Question

考虑下面的代码

...//somewhere in parent
const [history, setHistory] = useState({type: "ancient", history: "world", date: "2020-01-22"})
const [editMode, setEditMode] = useState(false);
return (
  <>
    <MyButton onClick={()=>{setEditMode(!editMode)}}
    {editMode && <MyReactComponent history={history}/>}
  </>);

//this component is used and history is passed in
const MyReactComponent = ({history})=>{
    const myInitialValues = {history_type: history.type, history_name: history.history, history_date: history.date}
    const myFormik = useFormik({initialValues: myInitialValues})
    const {values, setField} = myFormik;
    const clearAll = ()=> {
        setField("history_type", "");
        setField("history_name", "");
        setField("history_date", "");
    }

    return (
        <>
           <form>
              <input name="history_type" value={values.history_type}/>
              <input name="history_name" value={values.history_name}/>
              <input name="history_date" value={values.history_date}/>
              <myToggleButton onToggle={clearAll}/>
           </form>
        </>
    )
}

这个应用的上下文（背景）是当我点击它时有一个项目列表，history 上下文变量被更新，editMode 被一个按钮改变。

此代码的问题是每当我单击 ToggleButton 时，它根本不会清除输入字段。 我不知道这是否是问题，但是我的猜测（在我控制台记录了无数次之后）当我按下切换按钮时，MyReactComponent 中的代码被多次调用，所以它重置字段？我不知道这是否是原因。

如果必须从 react Formik 变量中读取，我们应该如何正确初始化 context 表单？这个问题的解决方案是什么？

使用反应上下文变量时初始化 formik 表单的正确方法

0 个答案: