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

Question

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

{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' 运行时出现错误，需要 ','

Answer 1

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

您可以从位于 https://www.digitalocean.com/community/tutorials/react-tabs-component

的这个选项卡组件中获得灵感

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;

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

React setState for Font Color with array index

setstate

reactjs