Reactjs 具有条件样式的事件目标

因此，我尝试创建一个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>

targetValue=（e）=>{
e、 预防默认值（）；
this.setState（{selected:true}）；
}

---

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

我假设您的问题在于选择一个值，因此我将这样做：

创建一个值列表（每个值将与

a

标记相关联），并为每个值提供一个ID（可以是一个非常简单的数字，如0、1、2、

修改

targetValue

，以便在单击

a

标记时，将

selectedItem

修改为刚才单击的链接的ID

如果

selectedItem

对应于ID，则将

choosen

类名称添加到链接中

---

---

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

创建一个值列表（每个值将与

a

标记相关联），并为每个值提供一个ID（可以是一个非常简单的数字，如0、1、2、

修改

targetValue

，以便在单击

a

标记时，将

selectedItem

修改为刚才单击的链接的ID

如果

selectedItem

对应于ID，则将

choosen

类名称添加到链接中

---

在此处查看：

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
已选：0
};
}
targetValue=e=>{
e、 预防默认值（）；
const{id}=e.target；
this.setState（{selected:id}）；
};
render（）{
console.log（this.state.selected）；
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

在此处检查：

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
已选：0
};
}
targetValue=e=>{
e、 预防默认值（）；
const{id}=e.target；
this.setState（{selected:id}）；
};
render（）{
console.log（this.state.selected）；
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

它给了我这个错误，我完全尝试了你写的类型错误：无法读取undefinedSorry的属性“id”。我已更改了我的响应。它给了我这个错误，我完全尝试了你写的类型错误：无法读取undefinedSorry的属性“id”。我已更改了我的响应。

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