React 组件绑定点击事件，并且传参完整Demo

最新推荐文章于 2024-07-24 20:38:11 发布

a_靖

最新推荐文章于 2024-07-24 20:38:11 发布

阅读量1.6w

点赞数 1

分类专栏： JS Web前端文章标签： React事件 React点击事件 React点击事件传参 React绑定点击事件 React自定义属性在事件获取

本文链接：https://blog.csdn.net/qq_35713752/article/details/83274345

版权

Web前端同时被 2 个专栏收录

403 篇文章 25 订阅

订阅专栏

186 篇文章 4 订阅

订阅专栏

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

1.传数组下标给点击事件Demo：

const A = 65 // ASCII character code

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>
    )
  }
}

代码说明，定义了一个数组，名为字母，在组件里面通过对循环渲染，每个渲染出来的李组件都绑定了对应的按键和点击事件，并且把该组件的关键当做参数传递给了handleClick函数。

2.传递自定义属性给事件Demo

const A = 65 // ASCII character code

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>
    )
  }
}

定义了自定义属性 letter 值是数组letters的下标。然后在 handleClick 事件通过 e.target.dataset 获取。