react点击事件如何实现

本篇内容介绍了“react点击事件如何实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、传数组下标给点击事件文件

首先我们新建一个新的项目之后通过定义一个数组，并且在组件中通过对循环进行渲染，在将每个渲染出来的 li 组件绑定相对于的按键和点击事件，最后在通过把该组件中的关键参数传递给handleClick函数，代码如下：

const A = 65 

class Alphabet extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
justClicked: null,
letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
};
}
handleClick(letter) {
this.setState({ justClicked: letter });
}
render() {
return (
<div>
	Just clicked: {this.state.justClicked}
	<ul>
		{this.state.letters.map(letter =>
		<li key={letter} onClick={()=> this.handleClick(letter)}>
			{letter}
		</li>
		)}
	</ul>
</div>
)
}
}

二、传递自定义属性给点击事件文件

通过定义属性 letter 值，然后在通过 e.target.dataset 来获取值。代码如下：

const A = 65 
 
class Alphabet extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      justClicked: null,
      letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
    };
  }
 
  handleClick(e) {
    this.setState({
      justClicked: e.target.dataset.letter
    });
  }
 
  render() {
    return (
      <div>
        Just clicked: {this.state.justClicked}
        <ul>
          {this.state.letters.map(letter =>
            <li key={letter} data-letter={letter} onClick={this.handleClick}>
              {letter}
            </li>
          )}
        </ul>
      </div>
    )
  }
}

“react点击事件如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！