本小节讲述在 React 中为 button 设置点击事件的注意点
1 前言
在 React 中，事件的名称都是 React 中提供的，因此名称的首字母必须厉害 例如
onClick onMouseOver
然后为事件提供的处理函数如下
onClick ={function}
2 为button 设置点击事件
2.1 无参数的点击事件
import React from 'react';
export default class EventItem extends React.Component {
render() {
return (
<div>
<h2>React中设置按钮的点击事件</h2>
<button onClick={this.show}> 按钮一 </button>
</div>
);
}
show(){
console.log("button的 点击事件")
}
}
或者是
import React from 'react';
export default class EventItem extends React.Component {
render() {
return (
<div>
<h2>React中设置按钮的点击事件</h2>
<button onClick={()=>this.show()}> 按钮一</button>
</div>
);
}
show = () => {
console.log('button的 点击事件');
};
}
2.2 有参数的点击事件
import React from 'react';
export default class EventItem extends React.Component {
render() {
return (
<div>
<h2>React中设置按钮的点击事件</h2>
<button onClick={() => this.show2('这里是传递的参数')}> 按钮二</button>
</div>
);
}
show2 = (pro) => {
console.log('button 的点击事件 这里是传递的参数' + pro.toString());
};
}
2.3 点击按钮修改私有属性值
在 React 中，如要修改 state 中的数据，推荐使用 this.setState({})
如下：
import React from 'react';
export default class EventItem extends React.Component {
constructor() {
super();
this.state = {
message: '这里是初始化的数据'
};
}
render() {
return (
<div>
<h2>React中设置按钮的点击事件</h2>
<button onClick={() => this.updateMessage('这里是新的数据')}>点击修改数据</button>
</div>
);
}
updateMessage = (pro) => {
this.setState({
message: pro
});
};
}
需要注意的是：
- 如果 state 中有多个属性的话，调用 setState 刷新数据时，只会把对应的 state 中属性值状态更新，而不会覆盖其它的
- setState 方法执行是异步执行的
如果是想在 setState 执行结束后，我们再获取修改的属性的值或者其他的一些同步的后续操作，可以为 setState 设置一个回调函数
this.setState({
message: pro
}, function() {
console.log('这里是回调')
});
2.4 React 中绑定文本框与 state 中的值
import React from 'react';
export default class EventItem extends React.Component {
constructor() {
super();
this.state = {
message: '这里是初始化的数据',
name: '初始化的name'
};
}
render() {
return (
<div>
<h2>React中设置按钮的点击事件</h2>
<p>
输入姓名 <input type="text" style={{width: '20%'}} value={this.state.name} onChange={(e) => this.textChange(e)}/>
</p>
</div>
);
}
textChange = (e) => {
// 获取当前实时输入的文本框的值
console.log(e.target.value);
// 第二种方式
// console.log(this.refs.txt.value);
this.setState({
name:e.target.value
})
};
