reactjs - 以粗体选择特定的进入 React 地图

Question

我正在建立一个设计系统，以便在一个带有 React 的 Web 应用程序中提供所有设计。在其中，有一个侧边栏，其中包含我从 Json 文件中检索到的所有主题。<li>当我点击它时，我想把它加粗。但是当我点击时，全部<li>变成粗体，当我点击下一个时，它变成“正常”，而它应该变成粗体

我做了一个状态 selected: false 和一个 setState as 的 handleClick !this.state.selected。我从 Json 文件中检索所有<li>标签，我需要从中映射它们。

export default class MainMenu extends Component {
    constructor(props){
        super(props);
        this.state = {
            selected: false
        };
    }
    handleClick = () => { 
        this.setState({
            selected: !this.state.selected
        })
    }


    render(){

        return (
            <div className="MainMenu" > 
        {
            Data.map(
                (item, index) => <div key={index}>
                    <h2 className="Title" >{item.group}</h2>
                    <ul className="List"> 
                        {item.pages.map((page, i) => <li key={i} onClick={this.handleClick.bind(this)} style={ this.state.selected? { fontWeight: 'normal' } : { fontWeight: 'bold' } }><Link to={page.url} className="ListItem">{page.name}</Link></li>)}
                    </ul>
                </div>
            )
        }

            </div>
        )
    }
}

我希望只有<li>当我点击它时才会加粗，而不是所有<li>

标签： reactjs

Answer 1

您需要保存您希望将粗体样式应用于状态的每个项目的 id。这将允许一次有多个粗体项目：

this.state = {
  selected: []
};

// ...
// Remove bold type if already active, otherwise add bold type
handleClick = id => {
    this.setState(state => {
      if (state.selected.includes(id)) {
        return state.selected.filter(item => item !== id);
      }
      return [...state.selected, id];
    });
  };

// ...
 Data.map((item, index) => (
      <div key={index}>
        <h2 className="Title">{item.group}</h2>
        <ul className="List">
          {item.pages.map((page, i) => (
            <li
              key={i}
              onClick={() => this.handleClick(i)}
              style={
                this.state.selected.includes(i)
                  ? { fontWeight: "normal" }
                  : { fontWeight: "bold" }
              }
            >
              <Link to={page.url} className="ListItem">
                {page.name}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    ));