如何显示多个输入元素，等于选定的数字 (React.js)

Question

我在编写 React 代码时遇到了一些困难。

目标：
你 select，例如，select离子场中的数字 4。这将导致下面出现 4 个（与 selected 数字相同的数量）输入字段。

问题：
我似乎无法让等量的输入出现在我的 DOM.
中图片：
wrong_result

我的代码：

calc.js

    useEffect(() => {
        setLevelInputs([LevelInputs, {id: 0}]);
        for (let i = 0; i < BarracksLevel.length; i++) {
            const number = i
            
            setLevelInputs(...LevelInputs, {id: number});
        }
        setDisplayBoxes(
            <>
                { LevelInputs.map((item, index) => {
                    
                    return (
                        <>
                            <input key={item.id} type="number" onChange={(e) => {setFighterLevels({...FighterLevels, [e.target.value]: e.target.value})}} name={"input_"+item.id} className="TailwindCSS"></input>
                        </>
                    );
                    })}
            </>
        )

    }, [BarracksLevel]);

我可能忽略了一些非常简单的事情，但我认为问问也无妨！

提前致谢，热情的菜鸟

Answer 1

const { useState, useEffect } = React
const App = () => {
  const [count, setCount] = useState(1);
  const [inputs, setInputs] = useState([<input />])
  useEffect(() => setInputs(
    Array.from({length: count}).map(_ => <input />)
  ), [count])
  return <div><input type="number" value={count} onChange={e => setCount(e.target.value)} />{inputs}</div>  
}
ReactDOM.render(<App/>, app)

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id=app>

如何显示多个输入元素，等于选定的数字 (React.js)

How Do I Display a Number of Input Elements, Equal to a Selected Number (React.js)

javascript

input

reactjs

display

react-hooks