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

【问题标题】：React final form - Unable to pass function to oChange prop反应最终形式 - 无法将函数传递给 oChange 道具
【发布时间】：2021-10-02 06:41:42
【问题描述】：

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

 <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);
  }

我做错了什么？

【问题讨论】：

标签： reactjs react-final-form

【解决方案1】：

我个人会使用 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>

【讨论】：