当前位置：首页 > article >正文

第九章 React中的事件处理

article 2025/1/10 23:27:01

我们之前已经了解到在react中可以通过onXXX属性来指定处理事件的函数（注意大小写）。

且该类型的事件是被react处理过，而并非是原生的DOM事件，这样做的原因是为了兼容性。
react的事件是通过事件委托的方式处理的，也就是委托给最外层的元素
react的事件有一个event参数，我们可以通过event.target拿到发生事件的DOM元素。

说到这里，我们可以优化一下之前的ref章节的案例：

class Demo extends React.Component {

      myRef1 = React.createRef()

      myRef2 = React.createRef()

      getData = () => {
        const val1 = this.myRef1.current.value
        console.log(val1)
      }
      
      blurData = () => {
        const val2 = this.myRef2.current.value
        console.log(val2)
      }

      
      render () {
        return (
          <div>
            <input ref={this.myRef1} type="text"/>&nbsp;
            <button onClick={this.getData}>click</button>&nbsp;
            <input ref={this.myRef2} onBlur={this.blurData} type="text"/>  
          </div>
        )
      }
    }
    // 2、将虚拟DOM渲染到页面，标签必须闭合
    ReactDOM.render(<Demo />,document.getElementById('app'))

在react的官方文档里面也说了，不要让我们过度使用ref，因为它会破坏组件的封装性。使用ref可以访问组件的DOM节点，但是这会使组件的实现细节泄漏到其使用者中。这使得组件更难以重构和维护，并且可能导致意外的副作用。另外，过度使用ref也可能会导致性能问题，因为它可能会使React无法正确地跟踪组件的状态和属性。因此，React建议尽可能避免使用ref，并使用props和状态来管理组件的行为和状态。

在以上案例中，我们可以看到，在获取第二个输入框的值时，是通过失去焦点事件，该事件就是在输入框元素本身上面。这个时候我们其实就不用ref，通过事件函数触发时拿到事件源就可以获取到值。改造：

class Demo extends React.Component {

      myRef1 = React.createRef()

      getData = () => {
        const val1 = this.myRef1.current.value
        console.log(val1)
      }
      
      blurData = (event) => {
        const val2 = event.target.value
        console.log(val2)
      }

      
      render () {
        return (
          <div>
            <input ref={this.myRef1} type="text"/>&nbsp;
            <button onClick={this.getData}>click</button>&nbsp;
            <input onBlur={this.blurData} type="text"/>  
          </div>
        )
      }
    }
    // 2、将虚拟DOM渲染到页面，标签必须闭合
    ReactDOM.render(<Demo />,document.getElementById('app'))