使用map()方法创建的数组的索引

Question

我正在使用 React .js 有 3 个数组a, b, c。我a使用该方法将数组添加到 HTML 标记map()。我需要：

1. 将onClick事件处理程序挂在数组的元素上a，以便单击该元素时，该元素会反映到组件<List />。

2. 该<List />组件应显示数组的元素b，并c具有与按下的数组元素的索引相同的索引a。
   例如：在 HTML 标记中，我单击“plum”元素（索引 = 2）。在<List />组件中，您需要获取“plum”以及元素“Sophie”和“audi”（索引= 2数组b和c）

以上几点该怎么做呢？

export default class App extends Component {

  a = ["Apple", "pear", "plum", "currant", "strawberry"];

  b = ["Amelia", "Oliver", "Sophie", "Alfie", "Jacob"];

  c = ["mercedes", "bmw", "audi", "volkswagen", "hyundai"];

  render() {

    let pp = this.a.map((arr, idx) => {

      return <li key={idx}>{this.a[idx]}</li>;

    });

    return (

      <div>

        <div>

          <ul>{pp}</ul>

        </div>

        <List />

      </div>

    );

  }

}

Answer 1

输出：https://i.stack.imgur.com/xloeO.gif完整示例：import React, { Component } from "react";export default class App extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; a: ["Apple", "pear", "plum", "currant", "strawberry"],&nbsp; &nbsp; &nbsp; b: ["Amelia", "Oliver", "Sophie", "Alfie", "Jacob"],&nbsp; &nbsp; &nbsp; c: ["mercedes", "bmw", "audi", "volkswagen", "hyundai"],&nbsp; &nbsp; &nbsp; index: null&nbsp; &nbsp; };&nbsp; }&nbsp; setIndex = i => {&nbsp; &nbsp; console.log(i);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; index: i&nbsp; &nbsp; });&nbsp; &nbsp; console.log(this.state.index);&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.index !== null && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <List&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a={this.state.a[this.state.index]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b={this.state.b[this.state.index]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.a.map((arr, idx) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("hi");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setIndex(idx);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {arr}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}class List extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>{this.props.a}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>{this.props.b}</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}您可以在此处查看工作示例：stackblitz

Answer 2

您可以在函数内添加onClick一个，如下所示limapitemsThatMatchIndex = []getItemsInBAndCThatMatch(index) {&nbsp; &nbsp; this.itemsThatMatchIndex = [this.b[index], this.c[index]];}render() {&nbsp; &nbsp; let pp = this.a.map((arr, idx) => {&nbsp; &nbsp; &nbsp; return (<li key={idx}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => this.getItemsInBAndCThatMatch(idx)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.a[idx]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp;</li>);&nbsp; &nbsp; });&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>{pp}</ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <List data={this.itemsThatMatchIndex}/>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }