javascript - 您可以从 i 元素 onclick 访问事件数据吗？

Question

我目前正在通过一些图标进行映射，这些图标都具有特定的值(图标类型和值通过 Prop 传递)

我的问题是我想要一个点击事件来更新状态以保存来自 onClick 事件的某些键和值/id 等。

这是我的状态:

state = {
    activity_id: '',
    rating: '',
    log: ''
  }

这是事件更改处理程序:

  changeHandler = e => {
    this.setState(
      {
        activity_id: e.target.id,
        rating: e.target.value,
        log: e.target.name
      },
      () => console.log('SUBMITTED:', this.props.user_id, this.state)
    )
    this.props.addRecord(this.props.user_id, this.state)
  }

这里是 onClick 事件发生的地方:

      <Grid.Column align="center">
        {this.props.smiles.map((smile, key) => {
          return (
            <a key={key}>
              <i
                className={
                  'far ' + `${smile.mood}` + ' fa-3x facesInCss'
                }
                value={smile.value}
                id={this.props.act_id}
                name={this.props.name}
                onClick={this.changeHandler}
              />
            </a>
          )
        })}
      </Grid.Column>

目前，当我点击第二个列表项时，我只会收到这样的信息:

{activity_id: "2", rating: undefined, log: undefined}

我做错了什么？

Answer 1

您可以直接将值传递给您的处理程序，而不是从事件参数中读取。

changeHandler = (e, activity_id, rating, log) => {
    this.setState(
      {
        activity_id: activity_id,
        rating: rating,
        log: log
      },
      () => console.log('SUBMITTED:', this.props.user_id, this.state)
    )
    this.props.addRecord(this.props.user_id, this.state)
}

<Grid.Column align="center">
  {this.props.smiles.map((smile, key) => {
    return (
      <a key={key}>
        <i
          className={'far ' + `${smile.mood}` + ' fa-3x facesInCss'}
          value={smile.value}
          id={this.props.act_id}
          name={this.props.name}
          onClick={(e) => this.changeHandler(e, this.props.act_id, smile.value, this.props.name)}
        />
      </a>
    )
  })}
</Grid.Column>