Javascript 映射到React中的数组onClick按钮

我正在映射一个数组，以获取每个按钮的文本。我想为每个按钮映射一个数组，以显示映射数组的文本

因此，按钮标题的数组为：

const arr1 = ["one", "two", "three"]

单击每个按钮时显示的文本为：

const arr2 = ["button one", "button two", "button three"]

因此，我希望带有文本“一”的按钮在单击时将文本“按钮一”显示为p标记

这是我到目前为止所拥有的

const myComp = () => {
    const arr1 = ['one', 'two', 'three']

    const arr2 = ['button one', 'button two', 'button three']

    const mapping = () => {
        arr2.map((arr) => {
            return <p>{arr}</p>
        })
    }
    return (
        <>
            {arr1.map((data) => 
                <button onClick={mapping()}>
                    {data}
                </button>
            )}
        </>
)

constmycop=（）=>{
常数arr1=['1'，'2'，'3']
常量arr2=['按钮一'，'按钮二'，'按钮三']
常量映射=（）=>{
arr2.map（（arr）=>{
返回{arr}

})
}
返回(
{arr1.map（（数据）=>
{data}
)}
)

使用钩子，将当前按钮文本放入要返回的JSX中的

中，并在单击回调中，将文本设置为

arr2中的相同索引：

const MyComp = () => {
    const [text, setText] = useState('');
    const arr1 = ['one', 'two', 'three']

    const arr2 = ['button one', 'button two', 'button three']

    const mapping = () => {
        arr2.map((arr) => {
            return <p>{arr}</p>
        })
    }
    return (
        <>
            {arr1.map((data, i) =>
                <button onClick={() => setText(arr2[i])}>
                    {data}
                </button>
            )}
            <p>{text}</p>
        </>
    );
};

constmycop=（）=>{
const[text，setText]=useState（“”）；
常数arr1=['1'，'2'，'3']
常量arr2=['按钮一'，'按钮二'，'按钮三']
常量映射=（）=>{
arr2.map（（arr）=>{
返回{arr}

})
}
返回(
{arr1.map（（数据，i）=>
setText（arr2[i]）}>
{data}
)}
{text}

);
};

实时片段：


constmycop=（）=>{
const[text，setText]=React.useState（“”）；
常数arr1=['1'，'2'，'3']
常量arr2=['按钮一'，'按钮二'，'按钮三']
常量映射=（）=>{
arr2.map（（arr）=>{
返回{arr}

})
}
返回(
{arr1.map（（数据，i）=>
setText（arr2[i]）}>
{data}
)}
{text}

);
};
ReactDOM.render(
,
document.getElementById（“react”）
);
您还可以创建包含对象的数组

const items = [{num : 'one', text: 'btn one'}, ...]

那么让smth像这样

const [text, setText] = useState(null)
const showText = (text) => {
  setText(text);
}
return <>
{
   items.map(obj => <button onClick={() => showText(obj.text)}>{obj.num}</button>)
}
{
  text && <span>{text}</span>
}
</>

const[text，setText]=useState（null）
常量showText=（文本）=>{
setText（文本）；
}
返回
{
items.map（obj=>showText（obj.text）}>{obj.num}）
}
{
文本&&{text}
}
以下是保持当前结构不变的方法

import React, { useState, useEffect } from 'react';

const MyComp = () => {
  const [buttonsClicked, setButtonsClicked] = useState([]);

  const arr1 = ["one", "two", "three"];
  const arr2 = ["button one", "button two", "button three"];

  useEffect(() => {
    // Create an array with the same amount of values
    // as the arr1 variable and initiate all values
    // as false
    const initialButtonsClicked = arr1.map(() => false);

    setButtonsClicked(initialButtonsClicked);
  }, []);

  const handleClick = index => {
    // Find and set the value of the button clicked to true
    // leaving the rest as they were
    setButtonsClicked(prev =>
      prev.map((item, buttonIndex) => (buttonIndex === index ? true : item))
    );
  };

  return (
    <>
      {arr1.map((_, index) => (
        <button
          key={index}
          onClick={() =>
            handleClick(index)
          }
        >
          {buttonsClicked[index] && arr2[index]}
        </button>
      ))}
    </>
  );
};

import React，{useState，useffect}来自“React”；
常量mycop=（）=>{
const[buttonsClicked，setButtonsClicked]=useState（[]）；
常数arr1=[“一”、“二”、“三”]；
常量arr2=[“按钮一”、“按钮二”、“按钮三”]；
useffect（（）=>{
//创建具有相同数量值的数组
//作为arr1变量，并启动所有值
//虚假的
const initialButtonsClicked=arr1.map（（）=>false）；
setButtonsClicked（initialButtonsClicked）；
}, []);
const handleClick=索引=>{
//查找并将单击的按钮的值设置为true
//让其余的人保持原样
setButtonsClicked（上一个=>
上一个映射（（项，按钮索引）=>（按钮索引===索引？真：项））
);
};
返回(
{arr1.map（（u，index）=>(
handleClick（索引）
}
>
{按钮单击[索引]&&arr2[索引]}
))}
);
};

import React, { useState, useEffect } from 'react';

const MyComp = () => {
  const [buttonsClicked, setButtonsClicked] = useState([]);

  const arr1 = ["one", "two", "three"];
  const arr2 = ["button one", "button two", "button three"];

  useEffect(() => {
    // Create an array with the same amount of values
    // as the arr1 variable and initiate all values
    // as false
    const initialButtonsClicked = arr1.map(() => false);

    setButtonsClicked(initialButtonsClicked);
  }, []);

  const handleClick = index => {
    // Find and set the value of the button clicked to true
    // leaving the rest as they were
    setButtonsClicked(prev =>
      prev.map((item, buttonIndex) => (buttonIndex === index ? true : item))
    );
  };

  return (
    <>
      {arr1.map((_, index) => (
        <button
          key={index}
          onClick={() =>
            handleClick(index)
          }
        >
          {buttonsClicked[index] && arr2[index]}
        </button>
      ))}
    </>
  );
};