因此，我在这部分工作上已经停留了大约一周的时间。我在这里问了一个问题，但是由于我对React的经验不足，所以我仍然不知道如何解决它。分配如下：
该项目的目标是创建一个模拟应用程序 一家咖啡馆的经营。您将需要为 客户，咖啡师和咖啡机。
客户组件
这是“面向用户”组件。在这里你应该有3个选择 会导致该组件触发自定义事件的项目。这些 选项包括：滴灌，法式压榨和特浓咖啡。
单击其中一个对象时，它应突出显示并停留 突出显示，直到单击另一个。
咖啡师组件
此组件接受订单，并在DOM上显示响应， 格式如下：
“一个{{order_type}}？那将是{{order_value}}。”
接受新订单时，播放动画以过渡到下一个 文字，并在新文字中进行过渡。
经过五秒钟的延迟（使用setTimeout方法）后，触发 开始准备咖啡的活动。在此更改文字 要读取的组件，“等待{{order_type}}”
该组件还需要一个方法，当 机器完成准备工作。此“ coffeeFinished”方法应 显示这样的消息：“您在这里{{order_type}}，请尽情享受！”。
接受新订单时，播放动画以过渡到下一个 文字，然后过渡为新文字。
机器组件
该组件在调用其“ brewCoffee”方法时应显示 视觉上向用户显示“正在酝酿：{{ order_type}}“。
再次使用setTimeout，让此组件等待五秒钟 触发“ brewingComplete”事件。触发此事件后， 将此组件的输出更改为“ {{order_type}}完成。”
煮咖啡时，需要对加载栏进行动画处理， 显示完成该过程需要多少时间。
应用程序对象
应用程序对象将负责侦听每个 从组件触发的事件，并调用适当的 方法在下一行。例如，当机器组件 触发事件“ brewingComplete”，应用程序应响应 通过调用Barista上的传递订单方法来进行事件 组件。
此外，此组件应将当前订单名称存储在 它的属性。这是在以下情况下应引用的变量 显示咖啡师正在酝酿和重复的订单。
我遇到的问题是采用一个组件，在这种情况下，当用户按下按钮时，将这些值与其他功能一起用于超时功能。到目前为止，我有：
App.js
import React, { Component } from 'react';
import './App.css';
import './Customer.js';
import Customer from './Customer.js';
import './Barista.js';
import Barista from './Barista.js';
import './CoffeeMachine.js';
import CoffeeMachine from './CoffeeMachine.js';
class App extends Component {
//The State with all the stuff that gets updated along the way
state = {
coffee: "",
value: 0,
bgColor: 'transparent'
}
//I apparently can't comment in the render thing without it appearing on the page. So, the Green box for the Customer Component, the Orange box for the Barista Component, and the Blue Box for the Machine component.
render() {
return (
<div className="App">
<div className="row" id="green">
<Customer order = {(coffeeSelect, value) => {this.send(coffeeSelect, value)}}/>
</div>
<div className="row" id="orange">
<Barista coffeeSelect = { this.state.coffee } value = { this.state.value }/>
</div>
<div className="row" id="blue">
<CoffeeMachine coffeeSelect = { this.state.coffee } value = { this.state.value }/>
</div>
</div>
)
}
//Sends the selected values to the other components
send(coffeeSelect, value) {
this.setState({coffee: coffeeSelect, value: value});
}
}
export default App;
Customer.js
import React, { Component } from 'react';
import './Customer.css';
class Customer extends Component {
//Each button has a div to be highlighted upon being selected
render() {
return(
<div>
<div className="button">
<button onClick={() => { this.optionSelect("Drip")}}>
Drip
</button>
</div>
<div className="button">
<button onClick={() => { this.optionSelect("French Press")}}>
French Press
</button>
</div>
<div className="button">
<button onClick={() => { this.optionSelect("Espresso")}}>
Espresso
</button>
</div>
</div>);
}
//Receives the brew, and assigns it to its matching cost
optionSelect(userChoice) {
var coffeeSelect = userChoice;
var value = 0;
if (coffeeSelect === "Drip"){
value = 5;
} else if (coffeeSelect === "French Press"){
value = 6;
} else if (coffeeSelect === "Espresso"){
value = 3;
}
this.props.order(coffeeSelect, value);
console.log(coffeeSelect);
console.log(value);
}
}
export default Customer;
Barista.js
import React, { Component } from 'react';
class Barista extends Component {
//The default text in the Barista Component until the user sends it the coffee and cost
state = {
text: "Hello, How May I Help You Today?",
orderText: "One " + this.props.coffee + "? That will be $" + this.props.value
}
//This is where I've hit the brick wall. I just need to get the buttons to also call this thing but everything I've looked up just gives me errors. If I could figure out where to call this I can do the timer to "prep" the coffee.
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;
至此，我完全陷入了困境，机器组件还没有任何东西。尽管我毫无疑问会遇到很多问题，但是我的主要问题是，当用户按下客户组件中的按钮时，如何更改咖啡师组件中的文本。有什么简单的我想念的东西吗？还是我完全超出了预期？
答案 0 :(得分：1)
您正在成为所有React问题中最经典的受害者。无需反应来声明更改，而是仅基于初始状态来呈现视图。
此超级简单的更改将解决您的问题：
// Barista.js
....
render() {
return (
<div>
{"One " + this.props.coffee + "? That will be $" + this.props.value}
</div>
)
}
....
现在，当您通过单击Customer中的按钮更改父状态时，Barista呈现方法将显示更新的消息，因为this.props.value已更改。
注意：您的道具命名不正确。在您称其为App的{{1}}中：
coffeeSelect ..，但是在<Barista coffeeSelect=
中您将其命名为Barista，因此请确保命名相同的道具。在this.props.coffee中应为：
App答案 1 :(得分：-1)
编辑：修复了必须按两次按钮的问题。
import React, { Component } from 'react';
class Barista extends Component {
//The default text in the Barista Component until the user sends it the coffee and cost
state = {
text: "Hello, How May I Help You Today?"
}
//The domino effect of messages. Upon being sent the brew and value variables, the confirm function is called which calls the waiting function which calls the finish function.
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()}, 1000);
}
finish() {
this.setState({ text: "Here is your " + this.props.coffee + ". Enjoy!"});
}
componentWillUpdate(nextProps,nextState) {
if (this.props.coffee !== null && this.state === nextState) {
setTimeout(() => {this.confirm()}, 3000);
}
}
render() {
console.log(this.props.coffee);
return(
<div>
{this.state.text}
</div>
)
}
}
export default Barista;