编辑1 在更改页面和提交表单之前，新的带有验证(react-boostrap)的演示.链接: Stackblitz 编辑2 带有Material-ui + react-hook-form的演示进行验证链接: Stackblitz I am new to React and practicing data transfers with form. I have a basic form like this.I want users to select an appliance from the dropdown menu and enter the zip code. When they click on go, they are redirected to another page that has other details to be filled out. like this:Now the second page can be accessed from other links where they may not have filled the two inputs before, so what I want is for users is to get the two inputs preloaded on the second form so as to avoid wasting time. Something like this:The code for the first component <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> </div> <div> <Typography variant="h6"> in </Typography> </div> <div> <FormControl style={{width: '60%'}}> <BootstrapInput type="text" id="demo-customized-textbox" placeholder="Zip Code"/> </FormControl> </div> <div style={{paddingTop: '1em'}}> Go </Button> </div>and the code for the second component<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>How Do I implement this if I want to use react hooks and not class components? Please help. 解决方案 Configure your routes (react-router-dom) to pass props (params in react-router-dom) from one page to another.Example :To pass the zipcode and device value from Home page to Request page, in your App.js file, your route should look like this:<Route path="/request/:zipcode/:device" render={props => <Request {...props} />} />and, in your Home page, the "Go" button must have this path:<Link to={`/request/${zipcode}/${device}`}> <button type="button">Go</button></Link>Check my demo : here to understandEDIT 1New demo with Validation (react-boostrap) before changing page and submitting the form.Link: StackblitzEDIT 2Demo with Material-ui + react-hook-form for validationLink: Stackblitz 这篇关于如何将输入数据从一个组件复制到另一组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
