Question

如何在单击处理程序中访问li元素以在单击时添加类？

const Type = React.createClass({
  clickHandler: function () {
    ...
  },
  render () {
    const classType = `cell type type-${this.props.name}`
    return (
      <li
      onClick={this.clickHandler}
      className={classType}
      >
      {this.props.name}
      </li>
    )
  }
})

Answer 1

执行此操作的最“反应”方法是将li类名称或状态存储在组件状态（或Redux，我猜这是你的事情）并通过点击处理程序修改它。 / p>

const Type = React.createClass({
  clickHandler: function () {
    this.setState({wasClicked: true});
  },
  render () {
    const classType = `cell type type-${this.props.name}` + (this.state.wasClicked ? " some-new-class-name" : " ")
    return (
      <li
      onClick={this.clickHandler.bind(this)}
      className={classType}
      >
      {this.props.name}
      </li>
    )
  }
})

请注意，如果您使用的是ES6，则必须将“this”范围绑定到clickHandler（以访问this.setState）。

Answer 2

如果你想获得li的任何数据，你可以在添加元素时添加对事件函数的调用。假设您想在onClick中访问classType：

const Type = React.createClass({
  clickHandler: function (classType) {
    /* Do something with the li classType */
  },
  render () {
    const classType = `cell type type-${this.props.name}`
    return (
      <li
      onClick={() => this.clickHandler(classType)}
      className={classType}
      >
      {this.props.name}
      </li>
    )
  }
})

如何访问react redux中的元素节点

2 个答案: