Question

为此，我正在考虑一种咖啡冲剂及其成本，然后将其发送到另一个组件。用户在一个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;

我在哪里以及如何调用Confirm（）函数来启动此事件链？

Answer 1

我认为您需要将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>
        )
    }
}

Answer 2

尝试找出目标之后，我想这就是您需要的：

首先，您可以定义一个父组件（例如App），该组件将渲染Barista组件以及按钮组件，例如：

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

第二，您需要将coffee和value传递到Barista组件，因此在App组件内部，您可以将<Barista />更改为

{ {2}}之后，您可以使用<Barista coffeeName={this.state.coffee} coffeeValue={this.state.value} />访问coffeeName组件内的coffeeValue和Barista ...您可以使用它们来显示信息。 p>

最后，在App组件中添加一个函数来修改this.props.coffeeName和coffee状态，并将其绑定到按钮。例如，

value

...

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

希望这会对您有所帮助。

从其他组件发送数据后，如何在React JS中调用函数？

2 个答案: