在我的情况下，我觉得“defaultChecked”不能正常工作的状态/条件。所以我用“checked”和“onChange”来切换状态。

Eg.

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

你可以使用一个状态变量"enableSwitch"和一个函数"handleSwitch"来处理你默认的选中Switch:

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switchId" checked={this.state.enableSwitch} onClick={this.handleSwitch}/>
    <label class="custom-control-label" for="switchId">switch text</label>
</div>

下面是一个函数，如果用户点击开关，它会反转变量:

handleSwitch = (e) => {
   this.setState({ enableSwitch: !this.state.enableSwitch });
}

我知道这是对一个老问题的晚回复，但这个简短的解决方案可能会帮助其他用户。

如果有人想处理具有多行的动态数据，这是用于处理动态数据的。

你可以检查rowId是否等于0。

如果它等于0，那么您可以将布尔值的状态设置为true。

interface MyCellRendererState {
    value: boolean;
}
constructor(props) {
        super(props);
        this.state = {
            value: props.value ? props.value : false
        };
        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    }
handleCheckboxChange() {
        this.setState({ value: !this.state.value });
    };
render() {
        const { value } = this.state;
        const rowId = this.props.rowIndex
        if (rowId === 0) {
           this.state = {
             value : true }
        }
        return ( 
          <div onChange={this.handleCheckboxChange}>
            <input 
            type="radio" 
            checked={this.state.value}
            name="print"
            /> 
          </div>
         )
      }

 <div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handleInputChange（event）{ console.log（“event”，event.target.checked） }

上面的句柄在选中或未选中时给你true或false的值

有几种方法可以做到这一点，以下是几种:

使用State Hooks编写:

function Checkbox() {
  const [checked, setChecked] = React.useState(true);

  return (
    <label>
      <input type="checkbox"
        defaultChecked={checked}
        onChange={() => setChecked(!checked)}
      />
      Check Me!
    </label>
  );
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

下面是JSBin上的一个现场演示。

使用组件编写:

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
    };
  }
  toggleChange = () => {
    this.setState({
      isChecked: !this.state.isChecked,
    });
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          defaultChecked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

下面是JSBin上的一个现场演示。

取值为true或false defaultChecked={true}

<input type="checkbox"
        defaultChecked={true}
        onChange={() => setChecked(!checked)}
      />