使用按钮在反应中增加 div

Question

我对 React/Next 还很陌生，我有一个简短的问题。

我正在尝试创建一个按钮来实时增加 div 的数量。

这是我的代码：

import React from 'react'


const Clown = () => {

    const [clownCounter, setClownCounter] = React.useState(1);

    function addClown(event) {
        event.preventDefault();
    }
    
    return(
        <React.Fragment>
        <div>
            <form>
                 
                {Array.from({ length: clownCounter}, (_unused, index) => index + 1).map(
                    (clownIndex) => {
                        const clownid = `${clownIndex}`
                        return (
                        <div key={clownid } className="clown-box">
                            <label htmlFor={clownid }>Activity {clownIndex}</label>
                            <br />
                            <input type="text" onChange={(e)=> onChangeForm(e)} name={activityId} id={activityId} />
                            <br />
                        </div>
                        )
                    },
                )}
                <span className="clown-add">
                    <button onClick={addClown} onChange={() => { setClownCounter(clownCounter++) }}>Add Clown</button>
                </span>   
                <br />  
            </form>
        </div>
        </React.Fragment>
    )
}
export default Clown

如您所见，目标是在每次单击按钮时增加小丑框 div 的数量。我想我很接近，但它目前不起作用。有人可以帮忙吗？

Answer 1

您的代码很少有这样的小错误。

首先，在map函数的return语句后面多了一个逗号(,)

其次，您正在更新按钮中 onChange 事件的状态 clownCounter，这是不正确的。您应该在单击时更新它，并防止单击按钮时表单提交的默认行为，或者您可以将按钮类型定义为type="button"

最后，你需要定义你的 onChangeForm 函数

const Clown = () => {

    const [clownCounter, setClownCounter] = React.useState(1);
    
    function onChangeForm() {

    }

    function addClown(event) {
        event.preventDefault();
        setClownCounter(prev=> prev+1);
    }
    
    console.log(clownCounter);
    return(
        <div>
            <form>
                 
                {Array.from({ length: clownCounter}, (_unused, index) => index + 1).map(
                    (clownIndex) => {
                        const clownid = `${clownIndex}`;
                        return (
                        <div key={clownid } className="clown-box">
                            <label htmlFor={clownid }>Activity {clownIndex}</label>
                            <br />
                            <input type="text" onChange={(e)=> onChangeForm(e)} name={'activityId'} id={'activityId'} />
                            <br />
                        </div>
                        )
                    })
                }
                <span className="clown-add">
                    <button type="button" onClick={addClown}>Add Clown</button>
                </span>   
                <br />  
            </form>
        </div>
    )
}
ReactDOM.render(<Clown />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app" />

Answer 2

^{编辑：想法问题是由Array.from 引起的，但事实并非如此。我已经删除了那部分，但保留了这个例子，因为 OP 可能会觉得它有用}

const { useState } = React;

const Clowns = ({ title }) => {
    const [clownCounter, setClownCounter] = React.useState(1);
    return (
        <div>
            <button onClick={() => setClownCounter(clownCounter + 1)}>
                Add clown
            </button>
            <div className='clowns'>
                {Array.from({ length: clownCounter}, (_unused, index) => index + 1).map((e, i) => (
                    <div>
                        <h4>{`Clown #${i + 1}`}</h4>
                        <img src={`https://placehold.it/150x150&text=Clown%20%23${i + 1}`} />
                    </div>
                ))}
            </div>
        </div>
    );
};

ReactDOM.render(<Clowns />, document.getElementById("react") );

.clowns { display: flex; flex-direction: column; }
h4 { margin-bottom: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="react"></div>