如何将输入数据从一个组件复制到另一个组件？

Posted 2023-02-22

【中文标题】如何将输入数据从一个组件复制到另一个组件？

【英文标题】：How to copy input data from one component to another component?

【发布时间】：2021-06-14 23:54:03

【问题描述】：

我是 React 的新手，我正在练习使用表单进行数据传输。我有一个这样的基本形式。

我希望用户从下拉菜单中选择一个设备并输入邮政编码。当他们点击 go 时，他们会被重定向到另一个页面，该页面还有其他详细信息需要填写。像这样：

现在可以从其他链接访问第二个页面，他们之前可能没有填写两个输入，所以我想要用户将两个输入预加载到第二个表单上，以避免浪费时间。像这样的：

第一个组件的代码

                   <div >
                        <FormControl style=width: '60%'>
                            <NativeSelect
                            id="demo-customized-select-native"
                            input=<BootstrapInput />
                            >
                            <option aria-label="Appliance" value="" />
                            <option value=10>Washing Machine</option>
                            <option value=20>Clothes Dryer</option>
                            <option value=30>Dishwasher</option>
                            <option value=40>Refrigerator</option>
                            <option value=50>Freezer</option>
                            <option value=60>Range</option>
                            <option value=70>Cooktop </option>
                            <option value=80>Oven </option>
                            <option value=90>Microwave</option>
                            <option value=100>Trash Compactor</option>
                            </NativeSelect>
                        </FormControl>&nbsp;
                    </div>
                    <div>
                        <Typography variant="h6">
                         in&nbsp;
                        </Typography>
                    </div>
                    <div>
                        <FormControl style=width: '60%'>
                            <BootstrapInput type="text" id="demo-customized-textbox" placeholder="Zip Code"/>
                        </FormControl>  &nbsp;   
                    </div>
                    <div style=paddingTop: '1em'>
                                        Go
                            </Button>
                    </div>

以及第二个组件的代码

<div>
      <div className=classes.root>
        <Box elevation=12 container>
          <Grid className=classes.gridSpace container spacing=1>
            <Grid item xs=12 sm=12 md=7>
              <h1 className=classes.h1>Request a repair online</h1>
              <p className=classes.bodyText>Fill in the form and get a <b>free</b> call back with <b>free</b> quotation!</p>
              <form className=classes.form noValidate>
          <Grid container spacing=2>
            <Grid item xs=12 sm=6>
              <TextField
                autoComplete="fname"
                name="firstName"
                variant="outlined"
                required
                fullWidth
                id="firstName"
                label="Name"
              />
            </Grid>
            <Grid item xs=12 sm=6>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="phone"
                label="Phone"
                type="tel"
                id="phone"
                autoComplete="phone"
              />
            </Grid>
            <Grid item xs=12 sm=6>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="zipcode"
                label="Zip Code"
                name="zipcode"
                autoComplete="zipcode"
              />
            </Grid>
            <Grid item xs=12 sm=6>
            <FormControl variant="outlined" fullWidth >
                <InputLabel  id="demo-simple-select-outlined-label" >Appliances</InputLabel>
                <Select
                id="َAppliances"
                label="َAppliances"              
                >
                <MenuItem value="">
                    <em></em>
                </MenuItem>
            <MenuItem value=10>Washing Machine</MenuItem>
            <MenuItem value=20>Clothes Dryer</MenuItem>
            <MenuItem value=30>Dishwasher</MenuItem>
            <MenuItem value=40>Refrigerator</MenuItem>
            <MenuItem value=50>Freezer</MenuItem>
            <MenuItem value=60>Range</MenuItem>
            <MenuItem value=70>Cooktop </MenuItem>
            <MenuItem value=80>Oven </MenuItem>
            <MenuItem value=90>Microwave</MenuItem>
            <MenuItem value=100>Trash Compactor</MenuItem>
            </Select>
           </FormControl>
          </Grid>
          <Grid item xs=12 sm=6>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="Date"
                type="date"
                name="date"
                autoComplete="date"
              />
              <FormHelperText>Preferred Date for Service</FormHelperText>
            </Grid> 
            <Grid item xs=12 sm=6>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="Time"
                type="time"
                min="08:00" 
                max="16:00"
                name="Time"
                autoComplete="Time"
              />
              <FormHelperText>Preferred Time for Service - Office Hours: 8:00 AM to 4:00 PM</FormHelperText>
            </Grid>
            
            </Grid>
            <div style= paddingTop: '2em'>
                <Button
                    style=backgroundColor: '#173f5f', color: 'white',  height: '3em'
                    type="submit"
                    variant="contained"
                    color="primary"
                    className=classes.submit
                >
                    <Typography style=fontFamily: 'ubuntu', textTransform: 'none'>Request a Call Back</Typography>
                </Button>
            </div>

如果我想使用反应钩子而不是类组件，我该如何实现？请帮忙。

【问题讨论】：

在下面查看我的答案和这个链接：reactrouter.com/web/api/generatePath/params-object

【参考方案1】：

配置您的路由 (react-router-dom) 以将道具（react-router-dom 中的参数）从一个页面传递到另一个页面。

例子：

要将邮政编码和设备值从主页传递到请求页面，在您的 App.js 文件中，您的路由应如下所示：

<Route path="/request/:zipcode/:device" render=props => <Request ...props /> />

并且，在您的主页中，“开始”按钮必须具有以下路径：

<Link to=`/request/$zipcode/$device`>
  <button type="button">Go</button>
</Link>

查看我的演示：here 了解

---

编辑 1

在更改页面和提交表单之前进行验证（react-boostrap）的新演示。

链接：Stackblitz

---

编辑 2

使用 Material-ui + react-hook-form 进行验证的演示

链接：Stackblitz

【讨论】：

非常感谢！

我实现了这个方法，但是第一个表单可以上传而无需填写详细信息。它没有验证，我怎样才能验证第一个表单，以便它不会继续使用空字段？

@WaseemAbdullahi 用新的演示（验证）检查我编辑的答案

@WaseemAbdullahi Material 或 Bootstrap，没关系......您只需按照 Material 文档将验证添加到表单字段即可。 (material-ui.com/components/text-fields) 最重要的是 HandleSubmit 函数和导入 (react-router-dom)

@WaseemAbdullahi 包完成材料：react-material-ui-form-validator (npmjs.com/package/react-material-ui-form-validator)