复选框切换在react.js中无法正常工作

Question

我在应用程序中有复选框切换。它不起作用。

我尝试使用onChange函数，但是它不起作用。

---

复选框

<input 
    id="switchCheckboxInputAssert" 
    className="switch-checkbox-input" 
    type="checkbox" 
    checked={this.state.option.assert == 1 ? true : false} 
    value={this.state.option.assert} 
    onChange={this.assertChange}
    disabled={!this.props.canBeSolution} 
/>

onChange功能

assertChange = () =>
    this.setState({
        option: { ...this.state.option, assert: !this.state.option.assert }
    })

如何正确切换复选框？

Answer 1

我认为您正在混淆controlled and uncontrolled个组件/元素。如果要允许复选框切换，您应该将值作为默认值（而不是值）传递给默认值，然后将选中的值传递给回调函数

<input
  id="switchCheckboxInputAssert"
  className="switch-checkbox-input"
  type="checkbox"
  // pass state value as default checked value
  defaultChecked={this.state.option.assert}
  // pass checked value to callback
  onChange={evt => this.assertChange(evt.target.checked)}
  disabled={!this.props.canBeSolution}
/>

Answer 2

您无需使用value属性，只需使用checked属性而无需任何逻辑，因为您已经在assertChange函数中进行了复选框的反应。 >

<input
  id="switchCheckboxInputAssert"
  className="switch-checkbox-input"
  type="checkbox"
  checked={this.state.option.assert}
  onChange={this.assertChange}
   />

工作演示

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
state = {
  option: {
    'something': 'new something',
    assert: true
  }
}
  assertChange = () => {
    this.setState({
      option: { ...this.state.option, assert: !this.state.option.assert }
    })
  }
  render() {
    console.log(this.state.option)
    return (
      <div className="App">
        <input
          id="switchCheckboxInputAssert"
          className="switch-checkbox-input"
          type="checkbox"
          checked={this.state.option.assert}
          onChange={this.assertChange}
           />
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望有帮助！