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

Question

我是 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>

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

Answer 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