如何将输入数据从一个组件复制到另一组件? [英] How to copy input data from one component to another component?
问题描述
我是React的新手，正在练习表格形式的数据传输.我有这样的基本形式.
我希望用户从下拉菜单中选择一个设备并输入邮政编码.当他们单击go时，它们将被重定向到另一个页面，该页面具有其他详细信息.像这样:
现在可以从其他链接来访问第二页，而其他链接之前可能没有填写两个输入，所以我想要给用户的是将两个输入预先加载在第二个表单上，以避免浪费时间.像这样:
第一个组件的代码
< div>< FormControl样式= {{{width:'60％'}}><本地选择id ="demo-customized-select-native"输入= {< BootstrapInput/>}>< option aria-label =设备"；值="/>< option value = {10}>洗衣机</option>< option value = {20}>衣服烘干机</option>< option value = {30}>洗碗机</option>< option value = {40}>冰箱</option>< option value = {50}>冷冻机</option>< option value = {60}>范围</option>< option value = {70}> Cooktop</option>< option value = {80}>烤箱</option>< option value = {90}>微波</option>< option value = {100}>垃圾压缩器</option></NativeSelect></FormControl>& nbsp;</div>< div><版式变体＝"h6">in& nbsp;</Typography></div>< div>< FormControl样式= {{{width:'60％'}}>< BootstrapInput type ="text"；id ="demo-customized-textbox"占位符=邮政编码"/</FormControl>& nbsp;</div>< div style = {{paddingTop:'1em'}}>去</按钮></div> 以及第二个组件的代码
< div>< div className = {classes.root}><箱子标高= {12}容器><网格className = {classes.gridSpace}容器间距= {1}><网格项xs = {12} sm = {12} md = {7}>< h1 className = {classes.h1}>在线请求维修</h1>< p className = {classes.bodyText}>填写表格并获得< b>免费</b>使用< b"免费</b>回叫报价！< form className = {classes.form} noValidate><网格容器间距= {2}><网格项xs = {12} sm = {6}>< TextFieldautoComplete ="fname"name ="firstName"；变体＝概述的".必需的全屏宽度id ="firstName"label =名称"/></Grid><网格项xs = {12} sm = {6}>< TextField变体＝概述的".必需的全屏宽度name =电话"标签=电话"type ="tel"id ="phone"autoComplete =电话"；/></Grid><网格项xs = {12} sm = {6}>< TextField变体＝概述的".必需的全屏宽度id =邮政编码"；label =邮政编码"name =邮政编码"autoComplete =邮政编码"；/></Grid><网格项xs = {12} sm = {6}>< FormControl variant =概述"；fullWidth>< InputLabel id ="demo-simple-select-outlined-label">设备</InputLabel><选择id ="َ Appliances"label ="َ Appliances">< MenuItem value =""< em></em></MenuItem>< MenuItem value = {10}>洗衣机</MenuItem>< MenuItem value = {20}>衣服烘干机</MenuItem>< MenuItem value = {30}>洗碗机</MenuItem>< MenuItem value = {40}>冰箱</MenuItem>< MenuItem value = {50}>冷藏室</MenuItem>< MenuItem value = {60}> Range</MenuItem>< MenuItem value = {70}> Cooktop</MenuItem>< MenuItem value = {80}>烤箱</MenuItem>< MenuItem value = {90}>微波</MenuItem>< MenuItem value = {100}>垃圾压缩器</MenuItem></选择></FormControl></Grid><网格项xs = {12} sm = {6}>< TextField变体＝概述的".必需的全屏宽度id =日期"type ="date"名称=日期"autoComplete =日期"/>< FormHelperText>服务的首选日期</FormHelperText></Grid><网格项xs = {12} sm = {6}>< TextField变体＝概述的".必需的全屏宽度id =时间"type =时间"min ="08:00"；max ="16:00"；名称=时间"autoComplete ＝时间"./>< FormHelperText>首选服务时间-办公时间:8:00 AM至4:00 PM</FormHelperText></Grid></Grid>< div style = {{paddingTop:'2em'}}><按钮style = {{backgroundColor:'#173f5f'，color:'white'，height:'3em'}}type ="submit"变体＝包含的".color =原色"className = {classes.submit}>{< Typography样式= {{fontFamily:'ubuntu'，textTransform:'none'}}}>请求回叫</Typography>}</按钮></div> 如果我想使用react钩子而不是类组件，该如何实现呢?请帮忙.
配置路线(react-router-dom)以将道具(react-router-dom中的参数)从一页传递到另一页.
示例:
要将邮政编码和设备值从主页传递到请求"页面，请在App.js文件中，路由应如下所示:
<路由路径="/request/:邮政编码/:设备"render = {props =><请求{... props}/>}/> ，然后在您的主页中，转到"按钮必须具有以下路径:
<链接到= {`/request/$ {zipcode}/$ {device}`}}>< button type ="button"> Go</button></链接> 检查我的演示:此处可以理解
编辑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 understand
EDIT 1
New demo with Validation (react-boostrap) before changing page and submitting the form.
Link: Stackblitz
EDIT 2
Demo with Material-ui + react-hook-form for validation
Link: Stackblitz
这篇关于如何将输入数据从一个组件复制到另一组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
