單擊添加新問題按鈕時添加另一行

Question

ReactJS >

我想默認顯示 10 行和一個帶有“添加新問題”的按鈕，這將是第 11 行。

當前行圖像在這里

目前它只有一行[請參閱下圖]。 我想要 10 個初始行，然后根據需要添加。 並且盡可能多的行可以添加它可以滾動。 在提交時，我將獲得來自該輸入組件的所有填充數據。 也許只是 console.log 現在何時提交或提醒。 注意-使用formik（也可以使用狀態）

不添加代碼，因為它是一個很大的組件。 當我正在尋找解決方案時，也許這里有一個代碼框。 如果有人可以幫助我，那就太好了。 請堅持下去。

Answer 1

我不知道你的用例。 但這里有一個簡單的方法來做到這一點。

export default function App() {
const [elements, setElements ] = useState([<QuestionColumn />]);

const element = () => (
  <QuestionColumn />
)
console.log(elements)
return (
<div className="App">
{elements.map((child) => child)}
  <button
        onClick={() => {
            setElements([
                ...elements,
                element()
            ])
        }}
    >
        Add New Question
    </button>
</div>
);
}