Javascript 使用map（）方法创建的数组的索引

我正在使用React.js 有3个数组

a

，

b

，

c

。 我使用

map（）

方法将数组

a

添加到HTML标记中。 我需要：

在

a

数组的元素上挂起

onClick

事件处理程序，以便在单击元素时，该元素将反映到

组件

组件应显示数组

b

和

c

的元素，其索引与按下的数组元素

a

的索引相同
例如：在HTML标记中，我单击“梅花”元素（index=2）。在

组件中，您需要获得“梅花”以及元素“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>
    );
  }
}

导出默认类应用程序扩展组件{
a=[“苹果”、“梨”、“李子”、“葡萄干”、“草莓”]；
b=[“阿米莉亚”、“奥利弗”、“索菲”、“阿尔菲”、“雅各布”]；
c=[“梅赛德斯”、“宝马”、“奥迪”、“大众”、“现代”]；
render（）{
设pp=this.a.map（（arr，idx）=>{
返回
{this.a[idx]}
；
});
返回(
{pp}
);
}
}

您可以在

映射

函数中的每个

li

中添加一个

onClick

，如下所示

itemsThatMatchIndex = []

getItemsInBAndCThatMatch(index) {
    this.itemsThatMatchIndex = [this.b[index], this.c[index]];
}


render() {
    let pp = this.a.map((arr, idx) => {
      return (<li key={idx}>
          <button onClick={() => this.getItemsInBAndCThatMatch(idx)}>
             {this.a[idx]}
          </button>
     </li>);
    });
    return (
      <div>
        <div>
          <ul>{pp}</ul>
        </div>
        <List data={this.itemsThatMatchIndex}/>
      </div>
    );
  }

itemsThatMatchIndex=[]
getItemsInBAndCThatMatch（索引）{
this.itemsThatMatchIndex=[this.b[index]，this.c[index]；
}
render（）{
设pp=this.a.map（（arr，idx）=>{
返回（

this.getItemsInBAndCThatMatch（idx）}>
{this.a[idx]}
）；
});
返回(
{pp}
);
}

您可以在

映射

函数中的每个

li

中添加一个

onClick

，如下所示

itemsThatMatchIndex = []

getItemsInBAndCThatMatch(index) {
    this.itemsThatMatchIndex = [this.b[index], this.c[index]];
}


render() {
    let pp = this.a.map((arr, idx) => {
      return (<li key={idx}>
          <button onClick={() => this.getItemsInBAndCThatMatch(idx)}>
             {this.a[idx]}
          </button>
     </li>);
    });
    return (
      <div>
        <div>
          <ul>{pp}</ul>
        </div>
        <List data={this.itemsThatMatchIndex}/>
      </div>
    );
  }

itemsThatMatchIndex=[]
getItemsInBAndCThatMatch（索引）{
this.itemsThatMatchIndex=[this.b[index]，this.c[index]；
}
render（）{
设pp=this.a.map（（arr，idx）=>{
返回（

this.getItemsInBAndCThatMatch（idx）}>
{this.a[idx]}
）；
});
返回(
{pp}
);
}

输出：

完整示例：

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      a: ["Apple", "pear", "plum", "currant", "strawberry"],
      b: ["Amelia", "Oliver", "Sophie", "Alfie", "Jacob"],
      c: ["mercedes", "bmw", "audi", "volkswagen", "hyundai"],
      index: null
    };
  }

  setIndex = i => {
    console.log(i);
    this.setState({
      index: i
    });
    console.log(this.state.index);
  };
  render() {
    return (
      <div>
        {this.state.index !== null && (
          <div>
            <List
              a={this.state.a[this.state.index]}
              b={this.state.b[this.state.index]}
            />
          </div>
        )}
        <div>
          <ul>
            {this.state.a.map((arr, idx) => (
              <li
                onClick={() => {
                  console.log("hi");
                  this.setIndex(idx);
                }}
              >
                {arr}
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

class List extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <ul>
          <li>{this.props.a}</li>
          <li>{this.props.b}</li>
        </ul>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
答：[“苹果”、“梨”、“李子”、“葡萄干”、“草莓”]，
b:[“阿米莉亚”、“奥利弗”、“索菲”、“阿尔菲”、“雅各布”]，
c:[“梅赛德斯”、“宝马”、“奥迪”、“大众”、“现代”]，
索引：空
};
}
setIndex=i=>{
控制台日志（i）；
这是我的国家({
索引：i
});
log（this.state.index）；
};
render（）{
返回(
{this.state.index！==null&&(
)}

{this.state.a.map（（arr，idx）=>(
{
控制台日志（“hi”）；
这个.setIndex（idx）；
}}
>
{arr}

))}

);
}
}
类列表扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

{this.props.a}
{this.props.b}

);
}
}

---

您可以在此处查看工作示例：

输出：

完整示例：

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      a: ["Apple", "pear", "plum", "currant", "strawberry"],
      b: ["Amelia", "Oliver", "Sophie", "Alfie", "Jacob"],
      c: ["mercedes", "bmw", "audi", "volkswagen", "hyundai"],
      index: null
    };
  }

  setIndex = i => {
    console.log(i);
    this.setState({
      index: i
    });
    console.log(this.state.index);
  };
  render() {
    return (
      <div>
        {this.state.index !== null && (
          <div>
            <List
              a={this.state.a[this.state.index]}
              b={this.state.b[this.state.index]}
            />
          </div>
        )}
        <div>
          <ul>
            {this.state.a.map((arr, idx) => (
              <li
                onClick={() => {
                  console.log("hi");
                  this.setIndex(idx);
                }}
              >
                {arr}
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

class List extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <ul>
          <li>{this.props.a}</li>
          <li>{this.props.b}</li>
        </ul>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
答：[“苹果”、“梨”、“李子”、“葡萄干”、“草莓”]，
b:[“阿米莉亚”、“奥利弗”、“索菲”、“阿尔菲”、“雅各布”]，
c:[“梅赛德斯”、“宝马”、“奥迪”、“大众”、“现代”]，
索引：空
};
}
setIndex=i=>{
控制台日志（i）；
这是我的国家({
索引：i
});
log（this.state.index）；
};
render（）{
返回(
{this.state.index！==null&&(
)}

{this.state.a.map（（arr，idx）=>(
{
控制台日志（“hi”）；
这个.setIndex（idx）；
}}
>
{arr}

))}

);
}
}
类列表扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

{this.props.a}
{this.props.b}

);
}
}

您可以在此处查看工作示例：