reactjs - reactjs错误-onChange不是函数错误

Question

我创建了一个带有文件输入和文本字段的字段数组。一切似乎都很好，但是当我尝试上传小图像或在文本字段中输入内容时，会弹出一个类型错误，并显示“onChange 不是函数”消息。如何修复此错误？

我已将代码上传到代码沙箱： https ://codesandbox.io/s/cool-wildflower-6jlcl?file=/src/App.js

Answer 1

您的整个代码按预期工作，您得到的错误onChange是因为未声明函数。您期望从组件的render 属性中Controller获得它，但您没有以正确的方式获得它。

71 号线

render={({ onChange }) => /** rest */ }

应该

render={({ field: { onChange } }) => /** rest */ }

您可以在 react hook form docs 中看到如何完成此操作的示例

Answer 2

好吧，首先您不能将函数命名为onChange已定义的默认 onChange，其次您从未定义过该函数。

  const handleChange = (value) => console.log("onchange ", value);

然后

<Controller
                  control={control}
                  name={`files.${index}.description`}
                  render={({ onChange }) => (
                    <input
                      style={{ border: "1px solid blue" }}
                      placeholder={"describe your file here"}
                      onChange={(event) =>
                        handleChange({ text: event.target.value }) // calling the handleChange function
                      }
                    />

我认为它应该工作

Answer 3

您正在调用该onChange函数，但您从未声明过它。

1.输入栏

从我所见，您只需进行 2 处小更改即可使输入正常工作：

1. 声明另一个状态变量：

const [input, setInput] = useState("");

2. onChange将输入参数更改为：

onChange="event => setInput(event.target.value)"

这应该使文本输入工作。

2.文件输入栏

对于文件输入，请确保您阅读此内容

因为它的值是只读的，所以它在 React 中是一个不受控制的组件。[...] 您应该使用 File API 与文件进行交互。

更多文档： https ://reactjs.org/docs/forms.html#control-components

表单作为具有反应的功能组件

https://rangle.io/blog/simplifying-controlled-inputs-with-hooks/