单击添加新问题按钮时添加另一行

Question

ReactJS >

我想默认显示 10 行和一个带有“添加新问题”的按钮，所以这将是第 11 行。

current row image here

目前只有一行[请参阅下图]。我想要 10 个初始行，然后根据需要添加。并且尽可能多的行可以添加它可以滚动。在提交时，我将获得来自该输入组件的所有填充数据。也许只是 console.log 现在何时提交或提醒。 注意——使用 formik（也可以使用 state）

不添加代码，因为它是一个大组件。也许这是codesandbox，当我在寻找解决方案时。如果有人可以帮助我，那就太好了。请坚持下去。

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>
);
}