具有条件样式的事件定位

Question

所以，我正在尝试制作一个 onClick 函数，当我单击特定的标签时，组件状态中的属性变为 "true"

这是状态

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

这是一个函数，我只是将 selected 从 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" 标签制作一个单独的组件，或者是否有更合适的应用方法？

Answer 1

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

创建一个值列表（每个值都将关联到您的 a 标签）并为每个值指定一个 ID（它可以是一个非常简单的数字，例如 0、1、2、.. .
修改targetValue，使点击a标签时，将selectedItem修改为刚刚点击的link的ID。
如果 selectedItem 对应于 ID

choosen

Answer 2

在这里查看：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);

具有条件样式的事件定位

event targeting with conditional style

ecmascript-6

reactjs

react-props