javascript - 收到错误 React 无法识别 DOM 元素上的 `handleChange` prop

Question

我正在尝试在 React 中创建一个登录表单。但我收到此错误

React 无法识别 DOM 元素上的 handleChange 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 handlechange。

输入值也没有设置输入字段当我在输入字段中输入时，它没有更新状态，为什么？

这是我的代码 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} 从父级传递所有 Prop 。考虑到 TextField 本身没有 handleChange 属性，我假设它将它传递给底层输入 DOM 元素，而该元素无法识别该属性。

您可以做的是提取 TextBox 中使用的 Prop 并使用剩余参数收集其余部分，这样您就不会最终传递不必要的 Prop :

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

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

Updated Sandbox