获取错误反应不能识别DOM元素上的“`handleChange`”支柱

Question

我试图使一个login form在react .but中，我得到了这个错误

React不识别DOM元素上的支柱。如果您有意希望它以自定义属性的形式出现在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

React不喜欢道具名称中的大写字母。与其传递"handleChange"，不如传递"handlechange“。对于"handleMouseDownPassword“，您将得到一个类似的错误。

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

Answer 3

我更改了handleChange()函数，您只设置值状态，在第一个输入上写入时需要设置状态userId，在写入第二个输入时需要设置密码。

在b.js添加道具name={stateName}，这样handleChange()可以知道哪个输入是控制的

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

(其他答案解释了为什么在控制台...props中会出现错误)