Question

Formik包提供了事件处理程序，例如handleBlur，handleChange，对于普通表单项，我们可以像这样分配：

    <input name ="foo" onChange = {handleChange}/>

如果我仔细观察一下onChange事件，例如：

<input value = {values.foo} name="foo" onChange ={(e) => {
    console.log(e); 
    handleChange(e); //Formik still handles it
}}/>

我们可以看到它是一个React SyntheticEvent，已分发给formik。

问题是-如果我已经实现了自己的组件，则说类似以下内容：

const Randomer = (props) => {
    const {onChange, name} = props; 
    const [value, setValue] = useState(Math.random() + ""); 
    return <div> 
         {value}
         <button onClick = {() => setValue(Math.random()+"")}> Click me</button> 
    </div> 
}

同样，我想让Formik知道此组件所做的更改，我将如何修改此代码来做到这一点？

Code Sandbox here.

Answer 1

一个选项（可能会在此基础上*）是在自定义组件的按钮上添加“值”和“名称”：

const Randomer = props => {
  const { onChange, name } = props;
  const [value, setValue] = React.useState(Math.random() + "");
  const handleClick = React.useCallback(
    event => {
      const newValue = Math.random() + "";
      setValue(newValue);
      onChange(event);
    },
    [onChange]
  );
  return (
    <div>
      {value}
      <button
        type="button"
        onClick={handleClick}
        value={value}
        name={name}
        onChange={onChange}
      >
        {" "}
        Click me
      </button>
    </div>
  );
};

那样-您仍在分派一个普通的表单事件，该事件恰好具有一个名称和一个值，Formik乐于接受它。

Code Sandbox here.

*显然，在互联网上获得正确答案的最佳方法是发布错误答案。

Answer 2

好吧，我找到了真正的答案：

Formik包提供签名的功能setFieldValue：

(field: string, value: any, shouldValdidate? :boolean) => void

您可以使用它来手动挂钩Formik字段集：

例如

 <Randomer
    onChange={value => setFieldValue("random", value)}
  />

如何创建Formik的handleChange想要的事件？

2 个答案: