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 处小更改即可使输入正常工作:
- 声明另一个状态变量:
const [input, setInput] = useState("");
- 将您的输入
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 prop 的 Controller
组件,但您没有以正确的方式获得它。
第 71 行
render={({ onChange }) => /** rest */ }
应该是
render={({ field: { onChange } }) => /** rest */ }
我创建了一个带有文件输入和文本字段的字段数组。一切似乎都正常,但是当我尝试上传小图片或在文本字段中键入内容时,会弹出类型错误消息“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 处小更改即可使输入正常工作:
- 声明另一个状态变量:
const [input, setInput] = useState("");
- 将您的输入
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 prop 的 Controller
组件,但您没有以正确的方式获得它。
第 71 行
render={({ onChange }) => /** rest */ }
应该是
render={({ field: { onChange } }) => /** rest */ }