Реагировать: я хочу создать функцию, которая отображает новый компонент с помощью onClick ПРИ КАЖДОМ нажатии на него

#javascript #reactjs

Вопрос:

Я создаю доску канбана. Я пытаюсь создать кнопку, которая добавляет новую карточку.

До сих пор мне удавалось создать условие с состояниями, которые будут по существу переключать карту. Он появится при нажатии и исчезнет при повторном нажатии кнопки, чего я не хочу, поэтому я начал все сначала.

Это функция, которую я хочу вызвать onClick. Сообщение регистрируется в консоли при нажатии кнопки, но компонент KanBanCard не отвечает, и ошибок нет.

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

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

    }

Мой рендеринг кнопки:

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

1. Привет, shanicunn; как насчет {this.newCard} того {this.newCard()} , чтобы? Вам нужно указать, что это функция. Также… Это поможет вам продвинуться дальше, но, возможно, вам потребуется сделать больше. Почему onClick возвращает элемент? Предполагается, что он изменяет состояние, а затем предполагается, что рендеринг учитывает это состояние, чтобы определить, как оно выглядит.

2. @HoldOffHunger нет, это неверно. способ, которым он использует OP, — это передача ссылки на функцию, способ, которым вы написали это, вызовет функцию при рендеринге, а не при onClick

3. Ах, хорошая мысль, в таком случае я бы рассмотрел второе, что я сказал, о том, что он возвращает элемент, а не изменяет состояние.

4. да, для обработчика событий вообще нет смысла возвращать что-либо на самом деле

Ответ №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>
        );
    }
}