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

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，我猜如果这是你的事情)，并通过点击处理程序修改它。

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