在React呈现生命周期中，表单元素上的value属性 将覆盖DOM中的值。对于一个不受控制的组件， 你通常希望React指定初始值，但留下 后续更新不受控制。要处理这种情况，您可以指定 使用defaultValue或defaultChecked属性代替value。

        <input
          type="checkbox"
          defaultChecked={true}
        />

Or

React.createElement('input',{type: 'checkbox', defaultChecked: true});

请签出更多关于defaultChecked复选框的详细信息: https://reactjs.org/docs/uncontrolled-components.html#default-values

<div className="display__lbl_input">
              <input
                type="checkbox"
                onChange={this.handleChangeFilGasoil}
                value="Filter Gasoil"
                name="Filter Gasoil"
                id=""
              />
              <label htmlFor="">Filter Gasoil</label>
            </div>

handleChangeFilGasoil = (e) => {
    if(e.target.checked){
        this.setState({
            checkedBoxFG:e.target.value
        })
        console.log(this.state.checkedBoxFG)
    }
    else{
     this.setState({
        checkedBoxFG : ''
     })
     console.log(this.state.checkedBoxFG)
    }
  };

要与复选框交互，您需要在更改复选框后更新复选框的状态。你可以使用defaultChecked来设置默认值。

一个例子:

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />

它的工作

<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />

函数初始化它

{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}

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

使用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"或""传递给input复选框的checked属性。空引号("")将被理解为假的，该项将不被选中。

let checked = variable === value ? "true" : "";
<input
     className="form-check-input"
    type="checkbox"
    value={variable}
    id={variable}
    name={variable}
    checked={checked}
/>
<label className="form-check-label">{variable}</label>