React 中的 DOM 未正确更新动态设置组件

Question

在反应中似乎DOM没有更新让我们说点击一个复选框让我们说id是checkbox1我想添加另一个复选框让我们说id Checkbox2也应该被选中

Checkbox id="checkbox1" onClick={this.handleChange.bind(this)} 
handleChange(){
    document.getElementById(checkbox2).checked=true;
}

在调试时我可以看到下面的行执行

document.getElementById(checkbox2).checked=true;

但是 DOM 没有更新，检查它是否与 JavaScript 一起工作，有一些反应问题

Answer 1

遵循 react 核心原则，仅使用状态更新 DOM。 更新虚拟DOM主要是不同的概念。 下面的代码片段将起作用。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked1: false,
      checked2: false
    }

  }

  handleCheck = () => {
    this.setState({ checked2: !this.state.checked2 });
  }
  render() {
    return (
      <div>
        <input type="checkbox" id="chk1" onChange={this.handleCheck} checked={this.state.checked1} />
        <input type="checkbox" id="chk2" onChange={this.handleCheck} checked={this.state.checked2} />

      </div>
    );
  }
}
export default App;