React 事件处理

React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

• React 事件绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

HTML 通常写法是：

<button onclick="clickBtn()">我是一个按钮</button>

React 中写法为：

function ClickButton(props) {
    function clickBtn() {
        alert("我是一个按钮组件");
    }
    return (
        // 这是 React 写法
        <button onClick={clickBtn}>{props.name}</button>
    );
}

ReactDOM.render(<ClickButton name="我是一个按钮" />, document.getElementById('root'));

在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault。

例如，通常我们在 HTML 中阻止链接默认打开一个新页面，可以这样写：

<a href="#" onclick="console.log('链接被点击了'); return false">
  我是一个链接
</a>

在 React 中的写法：

function ActionLink() {
    function handleClick(e) {
        e.preventDefault();
        alert("链接被点击了");
    }
    return (
        <a href="#" onClick={handleClick}>我是一个链接组件</a>
    );
}

ReactDOM.render(<ActionLink />, document.getElementById('root'));

实例中 e 是一个合成事件。

使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

向事件处理程序传递参数

在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

一个简单的例子：

function DeleteButton(props) {
    function deleteRow(id, e) {
        console.log("删除id为" + id + "的行" );
    }
    return (
        <button onClick={(e) => deleteRow(100, e)}>{props.name}</button>
    );
}

ReactDOM.render(<DeleteButton name="删除" />, document.getElementById('root'));