我是 react/js 新手，需要幫助。我有以下代碼：
import React, { useState, useEffect } from 'react'
function MainBoard() {
let letter = ''
const [lastLetter, setFirstLetter] = useState('')
function onLastLetterChange(event) {
const {id, name, type, value} = event.target
letter = value;
setFirstLetter((value) => value.slice(-1))
}
return (
<div>
<input id='5' className='game-area-five' type='text' onChange={onLastLetterChange} value={letter}/>
<input id='4' className='game-area-four' type='text' maxLength='1' />
<input id='3' className='game-area-three' type='text' maxLength='1' />
<input id='2' className='game-area-two' type='text' maxLength='1' />
<input id='1' className='game-area-one' type='text' maxLength='1' />
</div>
)
}
export default MainBoard
現在想象一下，我必須在 MainBoard() 回傳五次之前完成所有交易......必須有一種方法可以用陣列解決這個問題，對吧？第二件事，為什么在輸入 id 5 時，我無法在實際頁面上輸入任何內容？就像它被阻止了（只有當我在 html 輸入上有“值”屬性時才會發生這種情況）
非常感謝和解釋更多<3
編輯：我要做的是使用輸入 html 標記僅保存最后一個輸入（鍵 -> 一個字母），例如，如果您嘗試在輸入中鍵入“hello world”，它應該保存“d”和在輸入中僅顯示“d”。希望它更清楚......我真的不知道如何解釋:(
uj5u.com熱心網友回復：
我可能對你的 onLastLetterChange 有點迷茫，但我認為你不需要它，除非它是為了一些特別的東西。這是一個關于如何回圈遍歷陣列以生成一堆輸入的想法。想法是制作一個 InputComponent 然后回圈它：
const InputComponent = ({id, class}) => {
const [letter, setLetter] = useState("")
const [lastLetter, setFirstLetter] = useState('')
function onLastLetterChange(event) {
const {id, name, type, value} = event.target
setLetter(value);
setFirstLetter((value) => value.slice(-1))
}
return <input id={id} className={`game-area-${class}`} type='text' onChange={onLastLetterChange} value={letter}/>
}
const NormalInput = ({id,class}) => {
const [value, setValue] = useState("")
return <input id={id} className={`game-area-${class}`} type='text' onChange={(e) => setValue(e.target.value)} value={value}/>
}
export default function App() {
const arr = ["one","two","three","four","five"]
return (
<div className="App">
{arr.map((value, index) => ( <InputComponent id={index} class={value} />))}
</div>
);
}
uj5u.com熱心網友回復：
我不能用陣列的代碼回答你的第一個問題，因為我不知道 lastLetter 應該做什么，但是是的，你需要一個物件陣列來復制這個邏輯。
在 React 中，任何來自 useState 的變數都會導致組件重新渲染。所以這里letter不是一個 useState 變數，所以狀態實際上并沒有重新渲染。變數發生了變化，但因為它不是 useState 變數，所以它不會重新渲染。你想這樣做：
const [letter, setLetter] = useState("");
這是一個作業示例：
https://codesandbox.io/s/example-forked-23nsts?file=/src/App.js:0-931
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497006.html