TypeScript，“onChange”被指定了不止一次，所以这个用法将是[重复]答案

【问题标题】：TypeScript, 'onChange' is specified more than once, so this usage will be [duplicate]TypeScript，“onChange”被指定了不止一次，所以这个用法将是[重复]
【发布时间】：2021-10-22 21:08:36
【问题描述】：

我在 react 项目中使用 material-ui、react-hook-form 和 Typescript，当我尝试在 TextField 中添加 onChange 时，VScode 显示我和错误：

'onChange' 被指定了不止一次，所以这个用法将是 overwritten.ts(2783) formComponent.tsx(33, 15): 这个 spread 总是覆盖这个属性。

formComponent.tsx：

        <TextField
          variant="standard"
          defaultValue={projectData.name}
          onChange={handleSubmit((data) => console.log(data))}
          {...register('name', { required: true })}
          error={!!errors.name}
        />

【问题讨论】：

大概onChange是register函数返回的props之一。 TypeScript 告诉您register 返回的那个将覆盖您明确包含的onChange。想要显式获胜，需要在register道具传播之后。

标签： reactjs typescript material-ui

【解决方案1】：

你必须在注册扩展后放入 onChange

const textField = register('name', { required: true })

return (
    <input
        className="form-control"
        type="file"
        {...textField}
        onChange={(e) => {
          textField.onChange(e);
          handleSubmit(e);
     }}
    />
)

React hook form: How to can I use onChange on React Hook Form Version 7.0

【讨论】：