Getting TypeError: this is undefined on checkbox

Question

所以，我正在尝试创建一个复选框组件，但我遇到了问题。我的 CheckedBox.js 是这样的：

import React, {useState} from 'react';

function CheckedBox() {

return(
    <label>
      <input type="checkbox"
        defaultChecked={this.state.checked}
        onChange={this.handleChange.bind(this)}
      />
      </label>
)

}

export default CheckedBox;

这是我调用 CheckedBox 的部分：

<CheckedBox checked={checked} handleChange={() => setChecked(!checked)}/> MyCheckBox

我收到错误 TypeError: this is undefined。我该如何解决这个问题？

Answer 1

我看到您正在使用函数组件并将道具传递给它。所以你可以这样更新：

function CheckedBox({checked, handleChange}) {
  return (
    <label>
      <input
        type="checkbox"
        defaultChecked={checked}
        onChange={handleChange}
      />
    </label>
  );
}

Answer 2

您正在使用功能组件。功能组件没有像 Class 组件那样的内部状态。您需要使用 React Hooks 将状态存储在功能组件中。在这里阅读更多：Hooks intro, API Ref

在这种情况下，最好将道具作为值传递，使其成为 controlled component

import React from 'react';

function CheckedBox({value, onChange}) {

return (
    <label>
      <input type="checkbox"
        defaultChecked={value}
        onChange={onChange}
      />
      </label>
   )
}

export default CheckedBox;

Getting TypeError: this is undefined on checkbox

Getting TypeError: this is undefined on checkbox

javascript

checkbox

components

reactjs

react-native