具有条件样式的事件定位答案

【问题标题】：event targeting with conditional style具有条件样式的事件定位
【发布时间】：2019-02-21 09:00:17
【问题描述】：

所以，我正在尝试创建一个 onClick 函数，当我单击特定的 a 标记时，该函数使组件状态中的属性变为“true”

这里是状态

constructor(props){
      super(props);
      this.state = {
        selected: false
      }
  }

这是一个函数，我只是将选择从 false 变为 true

  targetValue = (e) => {
      e.preventDefault();
      this.setState({selected: true});
  }




<div className="choose">
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
              <a href="#" onClick={this.targetValue} className={(this.state.selected ? "choosen" : "")}></a>
            </div>

这里的问题是，当我单击一个“a”标签时，样式会应用于每个“a”标签。我希望它只应用于单击的“a”标签。我必须为每个“a”标签制作一个单独的组件还是有更合适的方法来应用它？

【问题讨论】：

标签： reactjs ecmascript-6 react-props

【解决方案1】：

在这里查看：https://codesandbox.io/s/9l995oj90p

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: 0
    };
  }
  targetValue = e => {
    e.preventDefault();
    const { id } = e.target;
    this.setState({ selected: id });
  };
  render() {
    console.log(this.state.selected);
    return (
      <div className="App">
        <a
          href="#"
          id={1}
          onClick={this.targetValue}
          className={this.state.selected === "1" ? "choosen" : ""}
        >
          Joj
        </a>
        <a
          href="#"
          id={2}
          onClick={this.targetValue}
          className={this.state.selected === "2" ? "choosen" : ""}
        >
          Joj
        </a>
        <a
          href="#"
          id={3}
          onClick={this.targetValue}
          className={this.state.selected === "3" ? "choosen" : ""}
        >
          Joj
        </a>
        <a
          href="#"
          id={4}
          onClick={this.targetValue}
          className={this.state.selected === "4" ? "choosen" : ""}
        >
          Joj
        </a>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

它给了我这个错误，我试过你写的 TypeError: Cannot read property 'id' of undefined
对不起。我改变了我的回答。

【解决方案2】：

我假设你的问题是关于选择一个值，所以这就是我要做的：

创建一个值列表（每个值将与您的a 标记相关联）并为每个值指定一个 ID（它可以是一个非常简单的数字，例如 0、1、2...
修改targetValue，这样当您点击a标签时，您将selectedItem修改为您刚刚点击的链接的ID。
如果 selectedItem 对应 ID，则将 choosen 类名添加到链接中

【讨论】：