出现错误 React 无法识别 DOM 元素上的 `handleChange` 道具

Question

我正试图做出login form反应。但我收到了这个错误React 无法识别handleChangeDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写字母handlechange。当我输入字段时，输入值也没有设置输入字段input它没有更新状态为什么？这是我的代码 https://codesandbox.io/s/quirky-clarke-qbkjw<form noValidate>      <TextBox        label="Username"        name="username"        type="text"        helperText="Assistive text"        handleChange={handleChange}        handleMouseDownPassword={handleMouseDownPassword}        value={userId}      />      <TextBox        label="Password"        name="password"        type="password"        helperText="Assistive text"        value={password}        showPassword={showPassword}        handleChange={handleChange}        handleClickShowPassword={handleClickShowPassword}        handleMouseDownPassword={handleMouseDownPassword}      />      <div className="button-group">        <button>LOGIN</button>      </div>    </form>

Answer 1

在TextBox组件中，您通过{...props}. 考虑到它TextField本身没有handleChange属性，我假设它将它传递给底层的输入 DOM 元素，该元素无法识别该道具。

您可以做的是提取内部使用的道具TextBox并使用 rest 参数收集其余部分，因此您最终不会传递不必要的道具：

export default function TextBox({handleChange, handleClickShowPassword, handleMouseDownPassword, value,  ...props}) {

另一种选择是{...props}从TextField组件中删除并显式传递所有必要的道具。

Answer 2

我改变了handleChange()函数，你只是设置了VALUE状态，你需要在第一个输入时设置状态userId，在第二个输入时设置密码

在 b.js 添加 props name={stateName} 以便 handleChange() 可以知道哪个输入正在控制

查看演示以获取更多信息： https ://codesandbox.io/s/gracious-heisenberg-z4q4z

（其他答案解释了为什么您在控制台中收到该错误...道具）

Answer 3

React 不喜欢道具名称中的大写字母。而不是传递“handleChange”，而是传递“handlechange”。对于“handleMouseDownPassword”，您将收到类似的错误。

关于输入问题，我认为您没有提供足够的上下文。但是您必须有一个 handleChange 方法来在每次更改字段时更新状态。