Question

我正在使用以下代码：

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

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

Answer 1

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

Answer 2

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

请注意，示例中的输入正在onChange上触发Formik的handleChange：

onChange={props.handleChange}

Answer 3

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

取消更改Formik表单文本字段的操作

3 个答案: