时间戳

首页 > 解决方案 > 使用数组索引为字体颜色反应 setState

reactjs - 使用数组索引为字体颜色反应 setState

问题描述

我很难理解 setState。我能够更改颜色，但所有数组项都使用此代码变为红色。我是新手，所以请在这里帮助我

{class.map((c, index) => (
   <Link style={{color: this.state.fcolor}} key={index} onClick={(e) => { 
      this.handleChangeColor(index) }}>
      {c.classname}<i className="fa fa-check"> </i>
   </Link>
))}

handleChangeColor(event, index){
     this.setState({
        fcolor: "red"
     })
}

我希望它专门使用索引但是当我添加索引时

fcolor[index]:'red' 运行 tru 一个需要 ',' 的错误

标签： reactjssetstate

解决方案

那是因为您的所有链接可能共享相同的状态。显示活动链接的一个好模式是存储活动 ID 以指定该链接应显示为红色。

您可以从https://www.digitalocean.com/community/tutorials/react-tabs-component找到的这个 Tab 组件激发您的灵感

class Tab extends Component {
  static propTypes = {
    activeTab: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
  };

  onClick = () => {
    const { label, onClick } = this.props;
    onClick(label);
  }

  render() {
    const {
      onClick,
      props: {
        activeTab,
        label,
      },
    } = this;

    let className = 'tab-list-item';

    if (activeTab === label) {
      className += ' tab-list-active';
    }

    return (
      <li
        className={className}
        onClick={onClick}
      >
        {label}
      </li>
    );
  }
}

export default Tab;

推荐阅读