Question

过去两周我一直在使用Material UI在React中编写原型，我真的非常喜欢它！

到目前为止，我总是将我的所有组件放在我的主要课程中，以便摆脱困境，并且没有考虑组件通信。

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

在我的情况下，我在我的主类中导入一个Stepper并想要禁用＆＃34; NEXT＆＃34;如果尚未设置主类中的一系列状态值，则按钮。

所以，首先，我必须选择我的点胶机，然后再次启用和禁用下一个按钮，直到我选择我的燃料类型，然后再次禁用＆＃34; NEXT＆＃34;按钮，直到选择了数量，然后才完成加油。

Stepper只是您在Material ui网站上找到的demo。

我在大班的状态如下：

    fuelDispenser: 0,
    fuelDispenserChosen: false,

    fuelType: '',
    fuelTypeChosen: false,

    fuelAmount: 0,
    fuelAmountChosen: false,

我打电话给桌子旁边的Stepper，列出了所有的掌柜。

<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')
  );

FIDDLE DEMO

反应组件通信

1 个答案: