Question

我有一个React应用程序，该应用程序从json文件中获取产品，我在页面顶部添加了两个按钮，以便每个按钮都可以显示其json状态的数据。

所以有菜单1状态和菜单2以及活动列表，我已将2用作

  Active1() {
    this.setState({ activelist: !this.state.items });
  }

  Active2() {
    this.setState({ activelist: !this.state.items2 });
  }

和切换它们的按钮是

   <button className="changebutton" onClick={this.Active1}>
            Menu 1
          </button>
          <button className="changebutton" onClick={this.Active2}>
            Menu2
          </button>

，并且在单击时将显示活动列表，该列表为menu1和menu2，但不起作用。

文件名 Itemlist.js

https://codesandbox.io/embed/4jox1kq20x?fontsize=14（您可能要单击沙箱中的刷新按钮）

Answer 1

创建第三个数组（也许是activeList。）然后只需在按钮单击上调用一个函数即可将items或items2复制到activeList中。最后，将render方法中对items的所有引用替换为activeList。这是缩写代码：

class ItemList extends React.Component {
  state = {
...
    items: [],
    items2: [],
    activelist: [],
  };

  componentDidMount() {
    dataPromise.then(
      result => {
        this.setState({
          isLoaded: true,
          items: result,
          activelist: result
        });
      },
...
    );

    dataPromise2.then(
      result2 => {
        this.setState({
          isLoaded: true,
          items2: result2
        });
      },
...
    );
  }

  constructor(props) {
    super(props);
...
    this.Active1 = this.Active1.bind(this); // ADDED
    this.Active2 = this.Active2.bind(this); // ADDED
  }
...
  Active1() {
    this.setState({ activelist: Object.assign({}, this.state.items) }); //CHANGED
  }

  Active2() {
    this.setState({ activelist: Object.assign({}, this.state.items2) }); //CHANGED
  }

  render() {
...
      return (
        <div>
          <button className="changebutton" onClick={this.Active1}>
            Menu 1
          </button>
          <button className="changebutton" onClick={this.Active2}>
            Menu2
          </button>
...
      );
    }
  }
}

这是一个代码框：https://codesandbox.io/s/jn6vp0qx4y?fontsize=14

更改用于在React中显示的集合

1 个答案: