您好，我是 ReactJS 和 Javascript 的新手。如何根據句子中的單詞數在模式上顯示任意數量的文本框（輸入欄位、文本輸入）？
例如，因為“希望你做得很好”中有 5 個單詞，所以模式中的輸入文本欄位的數量應該是 5。
我目前正在這樣做：
const [inputFields, setInputField] = useState([
{word: ''},{word: ''},{word: ''},{word: ''},{word: ''}
])
和
<InputGroup className="mb-3">
{inputFields.map((inputField, index) => (
<Form key={index}>
<Form.Control label="word" name="word" value={inputField.word} />
</Form>
))}
</InputGroup>
但它的手冊，我很樂意讓它自己動態作業。
我照常計算字數：
const handleShow = (poem) => {
var lyric = poem.lyrics;
var words_array = lyric.split(' ')
var words_num = words_array.length
console.log(words_num)
setShow(true)
};
謝謝。
uj5u.com熱心網友回復：
export default function DynamicInputs({poem}){
const [inputFields, setInputField] = useState([])
useEffect(() => {
setInputField(poem.lyrics.split(' ').map(word => ({word})))
}, [poem])
return (
<>
{
inputFields.map((field, index) => (
<input type="text" key={index}/>
))
}
</>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/496082.html
標籤：javascript 反应 数组 反应引导 输入字段