问题描述
因此，我在这部分工作上已经停留了大约一周的时间。我在这里问了一个问题，但是由于我对React的经验不足，所以我仍然不知道如何解决。分配如下：
So I've been stuck on this assignment for about a week now on this one part. I've asked a question about it here but due to my inexperience with React I still can't figure out how to solve it. The assignment is as follows:
客户组件
这是面向用户组件。在这里，您应该有3个
选项，它们将导致该组件触发自定义事件。这些
选项包括：滴水冲泡机，法式冲泡机和特浓咖啡。
This is the "User facing" component. Here you should have 3 option items that will cause this component to fire a custom event. These options are: Drip brew, french press, and espresso.
单击其中一个对象时，它应突出显示并保持
高亮，直到单击另一个。
When one of the objects is clicked, it should highlight and stay highlighted until another is clicked.
咖啡师组件
此组件接受订单，并在DOM上显示响应，格式为
：
This component takes the orders, and displays a response on the DOM, formatted as such:
一个{{order_type}}？将是{{order_value}}。
"One {{ order_type }}? That will be {{ order_value }}."
接受新订单时，播放动画以过渡出下一个
文本，并过渡为新文本。
When taking a new order, play an animation to transition out the next text, and transition in new text.
在延迟五秒钟后（使用setTimeout方法），触发
事件以开始准备咖啡。将此
组件中的文本更改为 Waiing for {{order_type}}
After a delay of five seconds (use the setTimeout method), fire an event to start the preparation of the coffee. Change the text in this component to read, "Waiting for {{ order_type}}"
此组件还需要一个在$时会调用的方法b $ b机器完成准备工作。这种 coffeeFinished方法应该
像这样显示一条消息：您在这里{{order_type}}，请享用！。
This component also needs a method that will be called when the machine finishes it preparation. This "coffeeFinished" method should display a message like so: "Here is you {{ order_type }}, enjoy!".
接受新订单时，播放动画以过渡出下一个
文本，并过渡为新文本。
When taking a new order, play an animation to transition out the next text, and transition in new text.
机器组件
该组件在调用其 brewCoffee方法时，应向用户直观显示
a消息，并显示当前正在酝酿：{{
order_type}}。
This component, when its "brewCoffee" method is called, should display a message visually to the user that says "Currently brewing: {{ order_type }}".
再次使用setTimeout，让此组件等待五秒钟，然后
触发 brewingComplete事件。触发此事件后，
还将此组件的输出更改为 {{order_type}}。
Again, using setTimeout, have this component wait five seconds before firing a "brewingComplete" event. When this event is fired, also change this component's output to "{{ order_type }} is done."
在冲泡咖啡时，会出现一个加载栏需要动画化
来显示该过程结束之前需要多少时间。
While the coffee is brewing, a loading bar needs to be animated to display how much time until the process is over.
应用程序对象
应用程序对象将负责侦听组件中触发的每个
事件，并在下一行中调用适当的
方法。例如，当机器组件
触发事件 brewingComplete时，应用程序应通过调用Barista
组件上的deliver order方法来响应
事件。
The application object will be responsible for listening for each of the events fired from your components, and calling the appropriate methods on the next in line. For instance, when the Machine Component fires the event "brewingComplete", the application should respond to the event by calling the deliver order method on the Barista component.
此外，此组件应将当前订单名称存储在其属性
中。这是当
显示由咖啡师酿造和重复的订单时应引用的变量。
Additionally, this component should store the current order name in its properties. This is the variable that should be referenced when displaying the order being brewed and repeated by the barista.
问题我在这种情况下，当用户按下按钮时，就会使用一个组件，并将这些值与其他功能一起用于超时功能。到目前为止，我所拥有的是：
The problem I've been having is taking one component, in this case when a user pushes a button, and using those values in the other components with the timeout function. What I have so far is:
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;
到目前为止，我已经完全陷入僵局，机器组件还没有任何东西。尽管我毫无疑问会遇到很多问题，但是我的主要问题是，当用户按下客户组件中的按钮时，如何更改咖啡师组件中的文本。
As by this point I am completely stuck, I don't have anything for the machine component yet. While I have no doubt that I have a multitude of problems here, my main problem is when a user presses a button in the customer component how to change the text in the barista component. Is there something simple I am missing or am I completely off the mark?
推荐答案
您是最经典的东西的受害者吗？所有React问题。无需反应来声明更改，而是仅基于初始状态来呈现视图。
You're falling victim to the most classic of all React problems. Instead of reacting to state changes, you are only rendering the view based on an initial state.
此超级简单的更改将解决您的问题：
This super simple change will fix your problem:
// Barista.js
....
render() {
return (
<div>
{"One " + this.props.coffee + "? That will be $" + this.props.value}
</div>
)
}
....
现在，当您更改父状态时，只需单击客户 咖啡师呈现器中的按钮即可方法将显示更新的消息，因为 this.props.value 已更改。
Now when your parent state changes from clicking the button in Customer the Barista render method will show the updated message because this.props.value has changed.
注意：您的道具命名不正确。.在 App 中，您将其命名为 coffeeSelect ：
Note: your props aren't named correctly.. in App you called it coffeeSelect:
<Barista coffeeSelect=
..但在咖啡师中，您将其称为 this.props.coffee ，因此请确保命名你的道具也一样。在 App 中应为：
.. but in Barista you called it this.props.coffee so make sure to name your props the same. In App it should be:
<Barista coffee=
这篇关于如何在React JS中的组件之间传递值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！