TypeScript：类型“EventTarget & Element”上不存在“checked”属性。为什么它不存在？

Question

我收到此错误

错误：(17, 35) TS2339：类型“EventTarget & Element”上不存在“checked”属性。

但这绝对是不可能的错误，因为 React 文档说checked确实存在target复选框（https://reactjs.org/docs/forms.html#handling-multiple-inputs）

这是我的代码。有什么问题让 TS 炸了？

// I specify a type for event. It must have `checked` property.
  onToggle = (ev: React.ChangeEvent) => {
    console.log('[ev]', ev.target.checked); // <= TS throws here
  }

  render() {
    return (
      <div>
        <input type="checkbox" name="switch" id="switch" onChange={ev => this.onToggle(ev)} checked={this.state.on}/>
      </div>
    )
  }

替代错误消息：

TS2339：“EventTarget”类型上不存在“checked”属性。

Answer 1

这是一个修复。您必须指定元素的类型ChangeEvent

  onToggle = (ev: React.ChangeEvent<HTMLInputElement>) => {
  // onToggle = (ev: React.ChangeEvent) => {
    console.log('[ev]', ev.target.checked); // <= TS throws here
  }

  render() {
    return (
      <div>
        <input type="checkbox" name="switch" id="switch" onChange={ev => this.onToggle(ev)} checked={this.state.on}/>
      </div>
    )
  }

Answer 2

看看这个，我目前将这种方式应用到我的项目中。

  onToggle = (ev: React.ChangeEvent<HTMLInputElement>) => {
    console.log('[ev]', (ev.target as HTMLInputElement).checked);
  }

  render() {
    return (
      <div>
        <input type="checkbox" name="switch" id="switch" onChange={onToggle} checked={this.state.on}/>
      </div>
    )
  }

顺便说一句，我认为你应该尝试useState获取/设置值的状态checked。例如：

const [checked, setChecked] = useState(false)

const onToggle = (ev: React.ChangeEvent<HTMLInputElement>) => {
        setChecked((ev.target as HTMLInputElement).checked);
    };

...

 render() {
    return (
      <div>
        <input type="checkbox" name="switch" id="switch" onChange={onToggle} checked={checked}/>
      </div>
    )
  }