7 React 事件处理

react

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

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

HTML 通常写法是:

<button onclick="activateLasers()">

激活按钮

</button>

React 中写法为:

<button onClick={activateLasers}>     // 驼峰

激活按钮

</button>

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

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

<a href="#" onclick="console.log('点击链接'); return false">

点我

</a>

在 React 的写法为:

function ActionLink() {

function handleClick(e) {

e.preventDefault();

console.log('链接被点击');

}

return (

<a href="#" onClick={handleClick}>

点我

</a>

);

}

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

当你使用 ES6 class 语法来定义一个组件的时候,事件处理器会成为类的一个方法。例如,下面的 Toggle 组件渲染一个让用户切换开关状态的按钮:

class Toggle extends React.Component {

constructor(props) {

super(props);

this.state = {isToggleOn: true};

// 这边绑定是必要的,这样 `this` 才能在回调函数中使用

this.handleClick = this.handleClick.bind(this);

}

handleClick() {

this.setState(prevState => ({

isToggleOn: !prevState.isToggleOn

}));

}

render() {

return (

<button onClick={this.handleClick}>

{this.state.isToggleOn ? 'ON' : 'OFF'}

</button>

);

}

}

ReactDOM.render(

<Toggle />,

document.getElementById('example')

);

向事件处理程序传递参数:

通常我们会为事件处理程序传递额外的参数。例如,若是 id 是你要删除那一行的 id,以下两种方式都可以向事件处理程序传递参数:

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

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

上述两种方式是等价的。

上面两个例子中,参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

值得注意的是,通过 bind 方式向监听函数传参,在类组件中定义的监听函数,事件对象 e 要排在所传递参数的后面,例如:

class Popper extends React.Component{

constructor(){

super();

this.state = {name:'Hello world!'};

}

preventPop(name, e){ //事件对象e要放在最后

e.preventDefault();

alert(name);

}

render(){

return (

<div>

<p>hello</p>

{/* 通过 bind() 方法传递参数。 */}

<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>

</div>

);

}

}

以上是 7 React 事件处理 的全部内容, 来源链接: utcz.com/z/382178.html

回到顶部