Question

我想将数组道具传递给作为模态组件的孩子在React中我有一个包含所有数据的api响应数组readpack 关于包裹。我想将数组readpack传递给Modal以在其中编辑Table 材质用户界面。我可以在道具包组件中传递道具吗？

我尝试制作另一个Modal组件并通过Modal的状态。

            import Modal from 'react-responsive-modal';
            import Grid from '@material-ui/core/Grid';
            import TextField from '@material-ui/core/TextField';
            import DialogActions from '@material-ui/core/DialogActions';
            import Button from '@material-ui/core/Button';


            // const styles = theme =>  ({
            //   root: {
            //     display: 'flex',
            //     justifyContent: 'center',
            //     alignItems: 'flex-end',
            //   },

            // });

                class Modal12 extends Component { 
                state = {
                    open10:false,

                }

                onOpenModal10 = () => {
                  this.setState({ open10: true });
                  console.log(this.state.open2,'open')
                };

                handleClose10 = () => {
                  this.setState({ open10: false });
                }

                onCloseModal10 = () => {
                  this.setState({ open10: false });
                };

               render() {


              const { classes,open10 } = this.state;
                return (
                    <div>
                    <Modal open={open10} onClose={this.onCloseModal10} 
                 center style={{align:'center'}}>
                                      <div>
                                        <Grid item xs={12} container 
                 spacing={16} style={{height:'270px',width:'550px'}}>
                                           <Grid item xs={2} style= 
                 {{padding:'10px'}}>Meal Type:</Grid>
                                           <Grid item xs={3} style= 
                 {{marginTop:'-33px',padding:'10px'}}><TextField
                    id="standard-name"


                    width="80%"
                    margin="normal"
                  /></Grid>
                                           <Grid item xs={4} style= 
                 {{padding:'10px'}}>Number of Dishes:</Grid>
                                           <Grid item xs={2} style= 
                 {{padding:'10px',marginTop:'-25px'}}><TextField
                    id="standard-name"
                    type="number"

                    width="90%"
                    margin="normal"
                  /></Grid>
                                           <Grid item xs={4} style= 
                 {{marginTop:'70px'}}>Package Name:</Grid><Grid item 
                  xs={4} 
                  style={{marginTop:'70px'}}><TextField
                    id="standard-name"
                    style={{marginTop:'-15px'}}
                    width="70%" 
                    margin="normal"/></Grid><Grid item xs={4} style= 
                 {{marginTop:'70px'}}></Grid>                                                       
                 <Grid item xs={12} style= 
         {{float:'right',marginTop:'80px',right:'12px',bottom:'12px'}}>
                 <DialogAction><Button  on Click= 
             {this.handleClose10} color="primary">
                                                  Cancel
                                                </Button>
          <Button  color="primary"> Update </Button>
          </DialogActions> </Grid> </Grid></div> </Modal>
                              </div>
                );
            }
            }
            export default Modal12;
          <Modal12/>```



 I want to edit a specific table onClicking edit button .the table to be selected is based on package ID.
this is the readpack array to be passed as props.
readpack:
id: 3
name: "Bronze"
pdc_map: Array(4)
0: {id: 72, dish_count: 12, meal_type: "Snacks"}
1: {id: 73, dish_count: 5, meal_type: "Snacks"}
2: {id: 74, dish_count: 5, meal_type: "Starters"}
3: {id: 75, dish_count: 10, meal_type: "Desserts"

将数组道具传递给组件

0 个答案: