reactjs错误-onChange不是函数错误

Posted 2023-02-18

技术标签:

【中文标题】reactjs错误-onChange不是函数错误【英文标题】：reactjs error - onChange is not a function error 【发布时间】：2021-09-14 00:16:45 【问题描述】：

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

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

【问题讨论】：

<input ... onChange=(event)=> onChange(text:event.target.value)/> 您正在调用 onChange 函数，但您从未声明过它。你到底想对输入值做什么？ 【参考方案1】：

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

第 71 行

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

应该是

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

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

【讨论】：

【参考方案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
                      
                    />

我觉得应该可以

【讨论】：

【参考方案3】：

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

1.输入字段

据我所知，您只需做 2 处小改动即可使输入正常工作：

声明另一个状态变量：

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

onChange

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

这应该使文本输入工作。

2。文件输入字段