无法更改 Formik 表单文本字段

【问题标题】：Unable to change Formik forms text field无法更改 Formik 表单文本字段
【发布时间】：2020-02-11 12:48:49
【问题描述】：

我正在使用以下代码：

        <Formik initialValues={{val:cell.value}}>
          <Form>
            <Field type="text" name="val" size="2" onChange = {(e)=> {console.log(e.target)}}></Field>
          </Form>
        </Formik>

我无法更改 UI 中的值。我做错了什么？

【问题讨论】：

标签： reactjs forms redux formik

【解决方案1】：

App.js

我使用了functional component 和useState。

const App = () => {
  const cell = { value: "test" };
  const [myVal, setMyVal] = useState(cell.value);
  return (
    <div>
      <Formik initialValues={{ val: cell.value }}>
        <Form>
          <Field
            type="text"
            name="val"
            size="20"
            placeholder="type something"
            value={myVal}
            onChange={e => {
              console.log(e.target.value);
              setMyVal(e.target.value);
            }}
          />
        </Form>
      </Formik>
    </div>
  );
};

查看demo code

【讨论】：

【解决方案2】：

在您的 onChange 中，您需要更新状态，然后将其传递回 Formik。现在你只是在输出值。

【讨论】：

【解决方案3】：

Formik 应该处理这些更改。请参阅以下示例：https://jaredpalmer.com/formik/docs/api/formik

注意示例中的输入是在onChange中触发Formik的handleChange：

onChange={props.handleChange}

【讨论】：