javascript - 动态更改时如何更改MenuItem（antd）的样式？

Question

我有一个带有一些 Menu.Item 的菜单，每个菜单都可以访问不同的内容。我想从一个内容动态移动到另一个内容，但由于它们由一个项目表示（让用户看到他在哪里），我需要设置项目的样式，并且因为我不点击它，所以没有该项目的风格是在此之后

这是一个演示：在线演示

// antd imports

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentPage: "0" };
  }

  handleMenuClick(e) {
    this.setState({ currentPage: e.key });
  }

  render() {
    return (
      <div className="App">
        <Menu onClick={e => this.handleMenuClick(e)}
          selectedKeys={[this.state.currentPage]}
          mode="horizontal">
          <Menu.Item tab="P1" key="0">  P1 </Menu.Item>
          <Menu.Item tab="P2" key="1"> P2 </Menu.Item>
        </Menu>

        <Row> {this.getPage()} </Row>
        <Button type="primary" onClick={() => this.action()}> Primary </Button>
      </div>
    );
  }

  getPage() {
    const pageKey = parseInt(this.state.currentPage, 10);
    if (pageKey === 0) {
      return <span>Page 1</span>;
    } else if (pageKey === 1) {
      return <span>Page 2</span>;
    }
    return <span>NOTHING TO DISPLAY</span>;
  }

  action() {
    this.setState({ currentPage: 1 });
  }
}

现在，如果我从一个项目单击到另一个项目，则菜单的样式正确，但是当我使用action()方法时，它显示了该项目未设置样式的良好内容

标签： javascriptreactjsantd

Answer 1

selectedKeys接受一个字符串数组：string[]，而action你提供了Number一个selectedKeys类型number[]。

要修复它，请在action代码处返回一个字符串：

action = () => {
//                              v Needs to be a type of `String`
  this.setState({ currentPage: '1' });
};