React中的DOM无法正确更新以正确设置组件

时间:2019-03-06 15:19:45

标签: reactjs

在反应似乎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一起使用,并且有一些问题

1 个答案:

答案 0 :(得分:1)

遵循反应核心原则仅使用状态更新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;