单击的数组中的文本区域默认值

Question

我创建了一个简单的数组。现在单击，我希望他们使用textarea编辑它们。

但我希望文本区域的默认值取自单击的项目。(目前，我已将其设置为数组中的第一个项目。(

如果问题不清楚，也请告诉我。

我的代码：

import { useState } from "react";
import "./styles.css";
export default function App() {
const [edit, setEdit] = useState(false);
const namesArray = [
{ name: "Test1", id: "1" },
{ name: "Test2", id: "2" },
{ name: "Test3", id: "3" }
];
return (
<>
{edit ? (
<div>
<div className="backdrop" />
<div className="editalign">
<div className="Edit">
{/* Need the default value to be the one Clicked */}
<textarea defaultValue={namesArray[0].name}></textarea>
<button className="button" onClick={() => setEdit(false)}>
{" "}
cancel
</button>
</div>
</div>
</div>
) : null}
<div className="App">
{namesArray.map((x) => (
<div key={x.id} onClick={() => setEdit(true)} className="namesArray">
{x.name}
</div>
))}
</div>
</>
);
}

在此处共享沙箱链接：

https://codesandbox.io/s/sweet-nash-wydv2p?file=/src/App.js

Answer 1

您可以使用另一种状态来控制该文本区域上的默认值

import { useState } from "react";
import "./styles.css";
export default function App() {
const [edit, setEdit] = useState(false);
//the default value state
const [selectedValue, setSelectedValue] = useState("");
const namesArray = [
{ name: "Test1", id: "1" },
{ name: "Test2", id: "2" },
{ name: "Test3", id: "3" }
];
return (
<>
{edit ? (
<div>
<div className="backdrop" />
<div className="editalign">
<div className="Edit">
{/* Need the default value to be the one Clicked */}
<textarea defaultValue={selectedValue}></textarea>
<button className="button" onClick={() => setEdit(false)}>
{" "}
cancel
</button>
</div>
</div>
</div>
) : null}
<div className="App">
{namesArray.map((x) => (
<div
key={x.id}
onClick={() => {
setEdit(true);
setSelectedValue(x.name);
}}
className="namesArray"
>
{x.name}
</div>
))}
</div>
</>
);
}

沙箱链接

Answer 2

是的，就像前面提到的皮尔查德。。。。

跟踪id，例如低于

const { useState } = React;
function App() {
const [edit, setEdit] = useState({ action: false, id: null });
const namesArray = [
{ name: "Test1", id: "1" },
{ name: "Test2", id: "2" },
{ name: "Test3", id: "3" },
];
return (
<React.Fragment>
{edit.action ? (
<div>
<div className="backdrop" />
<div className="editalign">
<div className="Edit">
{/* Need the default value to be the one Clicked */}
<textarea defaultValue={namesArray[edit.id - 1].name}></textarea>
<button className="button" onClick={() => setEdit(false)}>
{" "}
cancel
</button>
</div>
</div>
</div>
) : null}
<div className="App">
{namesArray.map((x) => (
<div
onClick={() => setEdit({ action: true, id: x.id })}
className="namesArray"
key={x.name}
>
{x.name}
</div>
))}
</div>
</React.Fragment>
);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);

.App {
font-family: sans-serif;
text-align: center;
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
.namesArray {
width: 100px;
height: 100px;
border-style: solid;
border-radius: 10px;
border-width: 1px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.backdrop {
width: 100vw;
height: 100vh;
background-color: black;
opacity: 0.2;
z-index: 1;
position: fixed;
}
.Edit {
z-index: 2;
width: 250px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-style: solid;
border-radius: 10px;
border-width: 2px;
position: fixed;
background-color: white;
color: black;
}
.button {
width: 80px;
height: 30px;
margin: 10px;
}
.editalign {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>