單擊編輯按鈕時，我想更改Textto欄位。input文本在map函式內部，下面提到了我作業過的代碼
function test() {
const [img, setImg] = useState(false)
let data = {
{
id: 1,
name: 'test 1'
},
{
id: 2,
name: 'test 2'
}
}
return (
<>
{data.map(e => {
return (
{img ? (
<input placeholder={e.name} />
) : (
<div>
<p>{e.name}</p>
<button onClick={() => setImg(true)}>edit</button>
</div>
)}
)
})}
</>
)
在這段代碼中，如果我單擊編輯按鈕，它實際上會顯示所有名稱的輸入，而不是我單擊的輸入。我只想編輯一個名稱，例如，如果我想編輯名稱test 1，我不希望輸入顯示在test 2
uj5u.com熱心網友回復：
像這樣的東西會起作用 -
function test() {
const [img, setImg] = useState(-1)
let data = {
{
id: 1,
name: 'test 1'
},
{
id: 2,
name: 'test 2'
}
}
return (
<>
{data.map((e, idx) => {
return (
{img==idx ? (
<input placeholder={e.name} style={{display: idEdit == e.id ? 'block' : 'none'}}/> //<== Conditionaly to appear or not
) : (
<div>
<p>{e.name}</p>
<button onClick={() => {
setImg(idx)
}
}>edit</button>
</div>
)}
)
})}
</>
)
uj5u.com熱心網友回復：
您可以在單擊編輯按鈕時設定一個狀態，然后使用此狀態有條件地顯示您想要的輸入：
function test() {
const [img, setImg] = useState(false)
const [idEdit, setIdEdit] = useState(null); //<== Create this state
let data = {
{
id: 1,
name: 'test 1'
},
{
id: 2,
name: 'test 2'
}
}
return (
<>
{data.map(e => {
return (
{img ? (
<input placeholder={e.name} style={{display: idEdit == e.id ? 'block' : 'none'}}/> //<== Conditionaly to appear or not
) : (
<div>
<p>{e.name}</p>
<button onClick={() => {
setImg(true)
setIdEdit(e.id) //<== set idEdit state here
}
}>edit</button>
</div>
)}
)
})}
</>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/480778.html
標籤：javascript 反应