反应最终形式 - 无法将函数传递给 oChange 道具

如何解决反应最终形式 - 无法将函数传递给 oChange 道具

我有一个使用 react final form 的形式。我正在尝试将当前输入的值传递给字段值更改时使用的函数。但是当我输入时，它没有输入。

 <Field name="myField">
     {({ input,Meta }) => (
         <div>
             <TextField
                 type="text"
                 name={input.name}
                 value={input.value}
                 onChange={() =>
                     handleChange(input.value)
                 }
                 label="Title"
             />
         </div>
      )}

</Field>

我在 render 方法上方有一个函数 handleChange。我想要做的就是控制当前值，并使用 setState 钩子来更新状态变量。

function handleChange(item: string) {
    setTitle(item);
    console.log(item);
  }

我做错了什么？

解决方法

我个人会使用 useEffect 来实现这一点，但问题是一旦您将自己的 useEffect 添加到它上面，它就会覆盖将表单值保存到表单本身的默认操作。

所以首先你仍然需要做默认的onChange。并且您想使用 e.target.value 从输入字段中获取值。

在您的示例中，您将输入字段的值传递到您的handeChange 中，但由于您没有将该值保存回输入和表单中，因此它始终为空。

  <Field name="myField">
    {({input}) => (
      <div>
        <TextField
          name={input.name}
          value={input.value}
          onChange={(e,val) => {
            console.log(e.target.value);
            handleChange(e.target.value)
            input.onChange(e.target.value);
          }}
        />
      </div>
    )}
  </Field>