Question

我有一个onclick处理程序：

render() {
  return (
    <div>
      <div className={className} onClick={this.target.bind(this,id)}>{name}</div>
    </div>
  )
}

这是函数：

target(test, event) {
  event.target.className="addClasss";  
}

我正在尝试上述方法在事件目标上添加addClass，但是有更好的方法吗？谢谢

Answer 1

例如，您可以将代码添加到DOM元素中，而不是手动将类添加到DOM元素中。添加一个附加状态变量，以跟踪已单击的元素。然后，您可以在render方法中使用它来选择应该添加类的元素。

示例

library(devtools)
assignInNamespace("version_info", c(devtools:::version_info, list("3.5" = list(version_min = "3.3.0", version_max = "99.99.99", path = "bin"))), "devtools")

class App extends React.Component {
  state = {
    arr: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }],
    clicked: null
  };

  target(id) {
    this.setState({ clicked: id });
  }

  render() {
    const { arr, clicked } = this.state;

    return (
      <div>
        {arr.map(element => (
          <div
            className={clicked === element.id && "addClass"}
            onClick={this.target.bind(this, element.id)}
          >
            {element.name} {clicked === element.id && "clicked!"}
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 2

For i = 2 To 4
    For j = 2 To 4
        If BombArray(i, j) <> "X" Then
            BombArray(i, j) = 0
                If BombArray(i + 1, j - 1) = "X" Then
                    BombArray(i, j) = BombArray(i, j) + 1
                End If
                If BombArray(i + 1, j) = "X" Then
                    BombArray(i, j) = BombArray(i, j) + 1
                End If
                If BombArray(i + 1, j + 1) = "X" Then
                    BombArray(i, j) = BombArray(i, j) + 1
                End If
                If BombArray(i, j - 1) = "X" Then
                    BombArray(i, j) = BombArray(i, j) + 1
                End If
                If BombArray(i, j + 1) = "X" Then
                    BombArray(i, j) = BombArray(i, j) + 1
                End If
                If BombArray(i - 1, j - 1) = "X" Then
                    BombArray(i, j) = BombArray(i, j) + 1
                End If
                If BombArray(i - 1, j) = "X" Then
                    BombArray(i, j) = BombArray(i, j) + 1
                End If
                If BombArray(i - 1, j + 1) = "X" Then
                    BombArray(i, j) = BombArray(i, j) + 1
                End If
        End If
    Next j
Next i

Answer 3

有些晚了，但对于将来的搜索者：请使用jquery：

target(test, event) {
    var element = $(event.target)
    element.addClass('your class');  
}

OBS：我部分同意上面的答案，做出了反应以使用状态，但是在某些情况下，我们不想关心使用状态控制代码的每个方面，特别是当存在重复性时类，因此我发现使用jquery定位这些元素更加容易。

如何在event.target-Js / ReactJs上添加类名

3 个答案: