Как вы вызываете функцию в React JS после отправки данных из другого компонента? - PullRequest
Новая
       6

Как вы вызываете функцию в React JS после отправки данных из другого компонента?

0 голосов
/ 12 октября 2018

Для этого я беру тип кофейного напитка и его стоимость и отправляю его в другой компонент.Пользователь нажимает кнопку в одном элементе div, а другой элемент div должен обновить свой текст: «Здравствуйте, чем я могу вам помочь сегодня?»"Один" + кофе + "? Это будет $" + цена.И так далее.

Я пытаюсь понять, как начать эту цепочку событий.Что у меня есть: 

import React, { Component } from 'react';

class Barista extends Component {

state = {
    text: "Hello, How May I Help You Today?"
}

confirm(){
    this.setState({ text: "One " + this.props.coffee + "? That will be $" + this.props.value});
    setTimeout(() => {this.waiting()}, 5000);
}

waiting() {
    this.setState({ text:"Waiting for " + this.props.coffee});
    setTimeout(() => {this.finish()}, 5000);
}

finish() {
    this.setState({ text: "Here is your " + this.props.coffee + ". Enjoy!"});
}

render() {

    return(

        <div>

        {this.state.text}

            </div>
    )
}
}

export default Barista;

Где и как я могу вызвать функцию verify () для запуска этой цепочки событий?

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

После попытки выяснить вашу цель, я думаю, это то, что вам нужно:

Во-первых, вы можете определить компонент отца, например, приложение, которое отображает компонент Barista , а также кнопкукомпонент , что-то вроде: 

<button id="latte"></button>
<Barista />

Во-вторых, вам нужно будет передать coffee и value компоненту Barista, поэтому внутри компонента приложения вы можете изменить <Barista />на 

<Barista coffeeName={this.state.coffee} coffeeValue={this.state.value} />
После этого вы можете получить доступ к coffeeName и coffeeValue внутри Barista компонента с помощью this.props.coffeeName ... Вы можете использовать их для отображения информации.

Наконец, добавьтефункция в компоненте приложения для изменения состояния coffee и value и его привязки к кнопке.Например, 

<button id="latte" onClick={this.onClick}></button>

... 

onClick(){...}

Надеюсь, это поможет вам.

0 голосов
/ 12 октября 2018

Я думаю, вам нужно переместить confirm к источнику для значения coffee, например: 

class App extends Component {
    state = {
        text: "Hello, How May I Help You Today?"
    }

    confirm(coffee, value) {
        this.setState({
            coffee,
            value,
            text: "One " + coffee + "? That will be $" + value
        }, setTimeout(() => { this.waiting() }, 5000));
    }

    waiting() {
        this.setState({ text: "Waiting for " + this.state.coffee });
        setTimeout(() => { this.finish() }, 5000);
    }

    finish() {
        this.setState({ text: "Here is your " + this.state.coffee + ". Enjoy!" });
    }

    render() {
        return (
            <div>
                <button onClick={this.confirm(A, 10)} />
                <button onClick={this.confirm(B, 11)} />
                <button onClick={this.confirm(C, 12)} />
                <Barista text={this.state.text} />
            </div>
        )
    }
}

class Barista extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text: props.text
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            text: nextProps.text
        })
    }

    render() {
        return (
            <div>
                {this.state.text}
            </div>
        )
    }
}
...