reactjs 错误 - onChange 不是函数错误

reactjs error - onChange is not a function error

我创建了一个带有文件输入和文本字段的字段数组。一切似乎都正常,但是当我尝试上传小图片或在文本字段中键入内容时,会弹出类型错误消息“onChange 不是函数”。我该如何解决这个错误?

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

好吧,首先你不能将函数命名为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
                      }
                    />

我觉得应该可以

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

1.输入字段

据我所知,您只需进行 2 处小更改即可使输入正常工作:

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

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

  1. 将您的输入 onChange 参数更改为:

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

这应该可以使文本输入工作。

2。文件输入字段

对于文件输入,请务必阅读this

Because its value is read-only, it is an uncontrolled component in React. [...] You should use the File API to interact with the files.

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

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

您的整个代码按预期工作,您得到的错误 是因为未声明 [​​=12=] 函数。您期待 render propController 组件,但您没有以正确的方式获得它。

第 71 行

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

应该是

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

可以看到an example of how this is done in react hook form docs