Reactjs 通过单击li项目更改div文本值

我想通过单击

ul

li

项来更改

div

中的文本值

const text = { 
value1 : 'blabla1',
value2 : 'blabla2',
value3 : 'blabla3'
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<div> </div>

const text={
值1:“blabla1”，
值2:“blabla2”，
值3:“blabla3”
}

一,
二,
三,

点击

li 1

div获取

value1

，点击

li 2

获取

value2

等

有人能给我一些建议吗，谢谢你

我正在写代码

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const text = [
    { id: 1, value: "blabla1" },
    { id: 2, value: "blabla2" },
    { id: 3, value: "blabla3" }
  ];

  const [textSelected, setTextSelected] = useState("");

  const selectLi = (id) => {
    let index = text.findIndex((x) => x.id === id);
    if (index === -1) return;
    setTextSelected(text[index].value);
  };
  return (
    <>
      <ul>
        {text.map((x) => (
          <li
            onClick={() => {
              selectLi(x.id);
            }}
          >
            {x.id}
          </li>
        ))}
      </ul>
      <br />
      <div>{textSelected}</div>
    </>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
常量文本=[
{id:1，值：“blabla1”}，
{id:2，值：“blabla2”}，
{id:3，值：“blabla3”}
];
const[textSelected，setTextSelected]=useState（“”）；
const selectLi=（id）=>{
让index=text.findIndex（（x）=>x.id==id）；
如果（索引==-1）返回；
setTextSelected（文本[索引].值）；
};
返回(

{text.map（（x）=>(
{
选择li（x.id）；
}}
>
{x.id}

))}



{textSelected}
);
}

工作演示

我正在写代码

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const text = [
    { id: 1, value: "blabla1" },
    { id: 2, value: "blabla2" },
    { id: 3, value: "blabla3" }
  ];

  const [textSelected, setTextSelected] = useState("");

  const selectLi = (id) => {
    let index = text.findIndex((x) => x.id === id);
    if (index === -1) return;
    setTextSelected(text[index].value);
  };
  return (
    <>
      <ul>
        {text.map((x) => (
          <li
            onClick={() => {
              selectLi(x.id);
            }}
          >
            {x.id}
          </li>
        ))}
      </ul>
      <br />
      <div>{textSelected}</div>
    </>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
常量文本=[
{id:1，值：“blabla1”}，
{id:2，值：“blabla2”}，
{id:3，值：“blabla3”}
];
const[textSelected，setTextSelected]=useState（“”）；
const selectLi=（id）=>{
让index=text.findIndex（（x）=>x.id==id）；
如果（索引==-1）返回；
setTextSelected（文本[索引].值）；
};
返回(

{text.map（（x）=>(
{
选择li（x.id）；
}}
>
{x.id}

))}



{textSelected}
);
}

工作演示

从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
常量clickHandler=（e）=>{
警报（“值为”+e.target.id）；
让item=document.getElementById（e.target.id）；
console.log（item.getAttribute（“name”）；
};
返回(


1.


2.


3.


);
}

。您还可以使用

useState

从“React”导入React，为变量赋值；
导入“/styles.css”；
导出默认函数App（）{
常量clickHandler=（e）=>{
警报（“值为”+e.target.id）；
让item=document.getElementById（e.target.id）；
console.log（item.getAttribute（“name”）；
};
返回(


1.


2.


3.


);
}

---

。您还可以通过使用

useState

为变量赋值。以下是另一种方法：

import React, { useState } from "react";

export default function App() {
  const [listValues, setListValues] = useState([1, 2, 3]);

  const text = { value1: "blabla1", value2: "blabla2", value3: "blabla3" };

  const showTextValue = (index) => {
    const newValues = [...listValues];
    newValues[index] = Object.values(text)[index];
    setListValues(newValues);
  };

  const content = listValues.map((val, index) => (
    <li key={index} onClick={() => showTextValue(index)}>
      {val}
    </li>
  ));

  return (
    <div className="App">
      <ul>{content}</ul>
    </div>
  );
}

import React，{useState}来自“React”；
导出默认函数App（）{
const[listValues，setListValues]=useState（[1,2,3]）；
常量文本={value1:“blabla1”，value2:“blabla2”，value3:“blabla3”}；
常量showTextValue=（索引）=>{
const newValues=[…listValues]；
newValues[index]=Object.values（text）[index]；
setListValues（新值）；
};
const content=listValues.map（（val，index）=>(
showTextValue（index）}>
{val}

));
返回(
{content}
);
}

以下是另一种方法：

import React, { useState } from "react";

export default function App() {
  const [listValues, setListValues] = useState([1, 2, 3]);

  const text = { value1: "blabla1", value2: "blabla2", value3: "blabla3" };

  const showTextValue = (index) => {
    const newValues = [...listValues];
    newValues[index] = Object.values(text)[index];
    setListValues(newValues);
  };

  const content = listValues.map((val, index) => (
    <li key={index} onClick={() => showTextValue(index)}>
      {val}
    </li>
  ));

  return (
    <div className="App">
      <ul>{content}</ul>
    </div>
  );
}

import React，{useState}来自“React”；
导出默认函数App（）{
const[listValues，setListValues]=useState（[1,2,3]）；
常量文本={value1:“blabla1”，value2:“blabla2”，value3:“blabla3”}；
常量showTextValue=（索引）=>{
const newValues=[…listValues]；
newValues[index]=Object.values（text）[index]；
setListValues（新值）；
};
const content=listValues.map（（val，index）=>(
showTextValue（index）}>
{val}

));
返回(
{content}
);
}

嘿，JDL，欢迎来到SO！请注意，StackOverflow不是免费的“编写我的代码”服务，您应该演示您已经尝试过的内容以获得帮助。现在这似乎是一件相当简单的事情。您要寻找的关键是“组件状态”，它允许您更改用于呈现的值并相应地更新DOM。然后，您可以根据数组索引或键更改该值，以便从对象中查找该值，并将其呈现为div的内部值。我只是征求建议，而不是寻求完整的解决方案。抱歉，如果我不够清楚。嘿，JDL，欢迎来到SO！请注意，StackOverflow不是免费的“编写我的代码”服务，您应该演示您已经尝试过的内容以获得帮助。现在这似乎是一件相当简单的事情。您要寻找的关键是“组件状态”，它允许您更改用于呈现的值并相应地更新DOM。然后，您可以根据数组索引或键更改该值，以便从对象中查找该值，并将其呈现为div的内部值。我只是征求建议，而不是寻求完整的解决方案。对不起，我说得不够清楚。