反应：我想制作一个函数，每次点击它时都会使用 onClick 呈现一个新组件答案

【问题标题】：React: I want to make a function that renders a new component with onClick EVERY TIME it's clicked反应：我想制作一个函数，每次点击它时都会使用 onClick 呈现一个新组件
【发布时间】：2020-08-30 00:53:37
【问题描述】：

我正在创建一个看板。我正在尝试创建一个添加新卡片的按钮。

到目前为止，我已经能够创建一个带有状态的条件，基本上可以切换卡片。单击时会出现，再次单击按钮时会消失，这不是我想要的，所以我重新开始。

这是我要调用 onClick 的函数。单击按钮时消息会记录在控制台中，但 KanBanCard 组件无响应且没有错误。

newCard() {
        console.log("New card being displayed");

        return (
            <div>
                <KanBanCard />
            </div>
        )

    }

我的按钮渲染：

return (
            <main>
                <button onClick={this.newCard} className="card-add">
                    +
                </button>
            </main>
            
        )

【问题讨论】：

你好，山村； {this.newCard} 到 {this.newCard()} 怎么样？你需要指出它是一个函数。另外......这会让你走得更远，但是，你可能需要做更多。为什么 onClick 返回一个元素？它应该改变状态，然后渲染应该考虑该状态，以确定它的外观。
@HoldOffHunger 不，这是不正确的。 OP 的方式是传递函数引用，您编写它的方式将在渲染时调用函数而不是 onClick
啊，好点，在这种情况下，我会考虑我所说的第二件事，关于它返回一个元素而不是改变状态。
是的，事件处理程序实际上返回任何东西是没有意义的

标签： javascript reactjs

【解决方案1】：

它没有渲染，因为您没有渲染您正在创建的新<KanBanCard />。您无法返回它，因为它将返回到 onClick 方法。您可以做的是创建一个包含看板卡列表的状态，并在单击按钮时更新它。确保呈现该列表。它看起来像这样：

class YourComponent extends React.Component {
    constructor() {
        this.state = {
            kanbanList: [],
        }
    }

    newCard() {
        const newCard = <div><KanBanCard /></div>;
        this.setState({ kanbanList: [...this.state.kanbanList, newCard] });
    }

    render() {

        return (
            <main>
                <button onClick={this.newCard} className="card-add">+</button>
                <div className="cards-holder">
                    {this.state.kanbanList.map(card => card)}
                </div>
            </main>
        );
    }
}

【讨论】：

很抱歉回复晚了，但非常感谢。我所要做的就是在我的 onClick 中使用箭头功能，它就像你说的那样工作！