React: document.getElementById (或onClick)不工作

React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。

在React中，使用document.getElementById或onClick等DOM操作的方式是不推荐的，因为React采用了虚拟DOM的概念，通过对比前后两个虚拟DOM树的差异来更新实际的DOM，从而提高性能。

如果需要在React中获取DOM元素，可以使用ref属性来引用DOM节点。ref属性可以是一个回调函数，当组件挂载或卸载时会调用该函数，并将对应的DOM节点作为参数传递给函数。通过这种方式，可以获取到DOM节点并进行相应的操作。

例如，可以在组件的构造函数中创建一个ref，并将其赋值给一个类属性：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    const node = this.myRef.current;
    // 对DOM节点进行操作
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

在上述代码中，通过ref属性将DOM节点赋值给this.myRef，并在componentDidMount生命周期方法中获取到该节点并进行相应的操作。

对于事件处理，React提供了一种更加简洁和一致的方式，即使用事件处理函数。可以直接将事件处理函数作为props传递给组件，并在组件内部使用this.props来访问该函数。

例如，可以在组件中定义一个按钮，并将点击事件处理函数作为props传递给按钮组件：

class MyComponent extends React.Component {
  handleClick() {
    // 处理点击事件
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

在上述代码中，当按钮被点击时，React会自动调用handleClick函数。

总结起来，React推荐使用ref属性来获取DOM节点，而不是直接使用document.getElementById或onClick等DOM操作。同时，React提供了一种简洁和一致的方式来处理事件，即使用事件处理函数。