反应组件通信

Question

在过去的两周里，我一直在用材料UI编写一个原型，我真的很享受它！

到目前为止，我一直把我的所有组件放在我的主类中，以了解组件的优点，并且不太重视组件通信。

我的问题是，我不知道如何告诉导入的组件，以便启用/禁用它的按钮。

在我的例子中，我在主类中导入一个步骤，如果主类中的一系列状态值尚未被设置，我希望禁用"NEXT“按钮。

所以，首先，我必须选择我的分配器，然后下一个按钮再次启用和禁用，直到我选择我的燃料类型，然后再禁用“下一步”按钮，直到数量被选择，然后完成加油。

步骤只是你可以在资料用户界面网站上找到的演示。

我在主课堂上的状态如下：

    fuelDispenser: 0,
    fuelDispenserChosen: false,

    fuelType: '',
    fuelTypeChosen: false,

    fuelAmount: 0,
    fuelAmountChosen: false,

我给我桌子旁边的台阶打电话，上面列了所有的分配器。

<div className="row center-xs">
    <div className="col-xs-6">
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Dispenser Name</TableCell>
              <TableCell>Status</TableCell>
              <TableCell>Fueling</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {this.state.dispensers.map(dispenser => {
              return(
                <TableRow key={dispenser.uid}>
                  <TableCell>{dispenser.description}</TableCell>
                  <TableCell>{dispenser.status}</TableCell>
                  <TableCell>{
                    <Button 
                      variant="raised" 
                      color="primary" 
                      type="submit"
                    > START
                    </Button> 
                  }
                  </TableCell>
                </TableRow>
              );
            })}
            </TableBody>
        </Table>
      </Paper>
    </div>

    <div className="col-md-6">
      <FuelingStepper />
    </div>

如果有人能向我解释如何将我的道具传递给组件，即使在另一个例子中，我也会非常高兴。我知道我可以做这样的事，

<FuelingStepper fuelDispenserChosen={fuelDispenserChosen} 
                fuelTypeChosen={fuelTypeChosen} 
                fuelAmountChosen={fuelAmountChosen}
/>

但我不明白在Stepper课上怎么处理他们三个人。

Answer 1

您可以将状态变量作为支持传递，如下所示。

 <FuelingStepper fuelDispenserChosen={this.state.fuelDispenserChosen} 
            fuelTypeChosen={this.state.fuelTypeChosen} 
            fuelAmountChosen={this.state.fuelAmountChosen} />

在FuelingStepper组件中，可以使用this.props获取这些值，如下所示。

 this.props.fuelDispenserChosen
 this.props.fuelTypeChosen
 this.props.fuelAmountChosen

我为您创建了一个演示如何传递状态变量并在另一个组件中获取状态变量的小示例。

  class Hello extends React.Component {
     constructor(props) {
        super(props);        
        this.state = {
          fuelDispenserChosen: 'false',
          fuelTypeChosen: 'true',
          fuelAmountChosen: 'false'
         };
      }
      render() {
        return (
           <div>
               <h1>Hello {this.props.name}</h1> 
               <FuelingStepper fuelDispenserChosen={this.state.fuelDispenserChosen} 
                               fuelTypeChosen={this.state.fuelTypeChosen} 
                               fuelAmountChosen={this.state.fuelAmountChosen} />
           </div>                
         )          
       }
  }
  class FuelingStepper extends React.Component {
  render() {
      return (
         <table>
            <tr>
              <td>Fuel Dispenser Chosen</td>
              <td>{this.props.fuelDispenserChosen}</td>
            </tr>
            <tr>
              <td>Fuel Type Chosen</td>
              <td>{this.props.fuelTypeChosen}</td>
            </tr>
            <tr>
             <td>Fuel Amount Chosen</td>
             <td>{this.props.fuelAmountChosen}</td>
            </tr>
         </table>  
        )          
     }
  }


  ReactDOM.render(
      <Hello name="James" />,
             document.getElementById('container')
  );

小提琴演示