亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用map()方法創建的數組的索引

使用map()方法創建的數組的索引

慕姐8265434 2023-09-28 09:43:09
我正在使用 React .js 有 3 個數組a, b, c。我a使用該方法將數組添加到 HTML 標記map()。我需要:將onClick事件處理程序掛在數組的元素上a,以便單擊該元素時,該元素會反映到組件<List />。該<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>    );  }}
查看完整描述

2 回答

?
蠱毒傳說

TA貢獻1895條經驗 獲得超3個贊

輸出:

https://i.stack.imgur.com/xloeO.gif

完整示例:


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>

    );

  }

}

您可以在此處查看工作示例:stackblitz


查看完整回答
反對 回復 2023-09-28
?
波斯汪

TA貢獻1811條經驗 獲得超4個贊

您可以在函數內添加onClick一個,如下所示limap


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>

    );

  }


查看完整回答
反對 回復 2023-09-28
  • 2 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號