Question

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

我的问题是我希望有一个click事件，该事件将更新状态以保留onClick事件中的某些键和值/ id等。

这是我的状态：

command

这是事件更改处理程序：

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

在这里发生onClick事件：

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

目前，当我单击第二个列表项时，我只会收到类似的内容：

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

我做错了什么？

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>

Answer 2

HTML元素表示一系列由于某些原因而与常规文本偏离的文本。一些示例包括技术术语，外语短语或虚构人物思想。通常以斜体显示。

该元素仅包括全局属性。

function handleClick(e){
  console.log('hello');
  console.log(e)
}

<!DOCTYPE html>
<html>
<body>

<i id='1' onclick="handleClick()">The lightning</i>

</body>
</html>

看看示例，当您在<i>标签上使用onclick时，它不会传递事件对象。这样您就不确定了。

但是，如果要以编写方式使用此标记，则需要将值显式传递给函数。

function handleClick(e){
      console.log('hello');
      console.log(1)
 }

<!DOCTYPE html>
<html>
<body>

<i id='1' onclick="handleClick(1)">The lightning</i>

</body>
</html>

全局属性参考 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

i标签参考 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

Answer 3

您没有传递尝试从中读取值的事件。只需更改

onClick={this.changeHandler}

到

onClick={e => this.changeHandler(e)}

将在单击时调用该函数，并将其传递给需要的函数。

此外，无需弹跳周围的东西。您将获得道具，在地图过程中将其分配给i，然后将其传递给函数。为什么不这样做：

this.setState(
  {
    activity_id: this.props.act_id,
    rating: e.target.value,
    log: this.props.name
  },
)

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

3 个答案: