如何将表单数据数组从子组件传递到父组件ReactJs
我在ReactJs中还很陌生，我知道我要查询的内容。
所以我有1个主要模态，其中有2个按钮可以添加plan_years和表单字段中的报价，在它们下方也有2个表。
模式1： 单击按钮1并打开第一个模态，然后填写表格并按下添加按钮，将把该数据作为plan_years表的第一个相应表中的行传递，该表在计划年模态后打开，并将该表单数据作为对象传递给父侧作为设置状态。 因此，数据将在表中显示为行，并将状态设置为传递给api。
模式2 单击按钮2并打开第二个模式，然后填写表格并按添加按钮将把该数据作为要约模式后面打开的要约表的第二个相应表中的行传递，并将该形式数据作为对象传递给父方作为设置状态。 因此，数据将在表中显示为行，并将状态设置为传递给api。
由于限制，我删除了表单字段。
import React, {Component} from 'react';
import {connect} from "react-redux";
class LeadsSearchResults extends Component {
constructor(props) {
super(props);
this.state = {
createLeadProjectNumber: '',
createLeadCustomerName: '',
isLeadPlanCreateDialogOpen: '',
lead_plans: [],
offers: []
}
}
launchCreateContactDialog = () => {
this.setState({isContactCreateDialogOpen: true});
const {GetProjectsData, GetUsersData, GetBranches, GetThemes, GetClassifications} = this.props;
GetProjectsData();
GetUsersData();
GetBranches();
GetThemes();
GetClassifications();
}
ValidateContactCustomerForm = () => {
const {createLeadProjectNumber} = this.state
if (createLeadProjectNumber !== '') {
// this.setState({isFirstNameEmpty: false})
this.createContactAndCloseDialog()
} else {
if (createLeadProjectNumber === '') {
this.setState({isFirstNameEmpty: true})
} else {
this.setState({isFirstNameEmpty: false})
}
}
}
createContactAndCloseDialog = () => {
const {
createLeadProjectNumber,
createLeadCustomerName,
} = this.state;
this.props.CreateCustomerContact(
createLeadProjectNumber,
createLeadCustomerName,
createLeadProjectName,
);
this.setState({
createLeadProjectNumber: '',
createLeadCustomerName: '',
isContactCreateDialogOpen: false,
});
}
closeCreateContactDialog = () => {
this.setState({
isContactCreateDialogOpen: false,
createLeadProjectNumber: '',
});
}
addItem() {
console.log()
// I am trying to get the form data for both lead_plans and offers here in the format like:
// lead_plans:[{val1:a, val2:b, val3:c, val4:d}, {val1:a, val2:b, val3:c, val4:d}]
// offers:[{val1:a, val2:b, val3:c, val4:d}, {val1:a, val2:b, val3:c, val4:d}]
// lead data too from the main form page
// trying something like below.
// this.setState(state => ({
// items: [...state.items, item]
// }));
}
handleCreateLeadProjectNumberSelect = (e) => {
this.setState({createLeadProjectNumber: e.target.value})
}
handleCreateLeadBranchNumberSelect = (e) => {
this.setState({createLeadBranchNumber: e.target.value})
}
handleCreateLeadThemeNumberSelect = (e) => {
this.setState({createLeadThemeNumber: e.target.value})
}
handleCreateLeadClassificationNumberSelect = (e) => {
this.setState({createLeadClassificationNumber: e.target.value})
}
handleCreateLeadLeadPartnerOneNumberSelect = (e) => {
this.setState({createLeadLeadPartnerOneNumber: e.target.value})
}
handleCreateLeadLeadPartnerTwoNumberSelect = (e) => {
this.setState({createLeadLeadPartnerTwoNumber: e.target.value})
}
handleCreateLeadLeadPartnerThreeNumberSelect = (e) => {
this.setState({createLeadLeadPartnerThreeNumber: e.target.value})
}
render() {
const {isloading, default_year, leads_list, projects_list, users_list, branches_list, themes_list, classifications_list} = this.props;
const {
isContactCreateDialogOpen,
createLeadProjectNumber,
createLeadCustomerName,
createLeadProjectName,
createLeadBranchNumber,
createLeadThemeNumber,
createLeadClassificationNumber,
createLeadComment,
createLeadLeadPartnerOneNumber,
createLeadLeadPercentOneNumber,
createLeadLeadPartnerTwoNumber,
createLeadLeadPercentTwoNumber,
createLeadLeadPartnerThreeNumber,
createLeadLeadPercentThreeNumber
} = this.state;
if (leads_list.length === 0) return null;
console.dir(leads_list, '******************************')
return (
<React.Fragment>
{isloading && <OverLoader/>}
<Grid container item xs={12} spacing={1} style={{marginTop: '10px'}} className="LeadsSearchResults">
<Button variant="outlined" className="m-10" color="primary"
onClick={this.launchCreateContactDialog}>Neve Akquise</Button>
<Button variant="outlined" className="m-10" color="primary">Export Excel</Button>
<TableContainer component={Paper}>
<Table size="small" aria-label="dense table">
<TableHead>
<TableRow>
<TableCell align="left" colSpan={2}></TableCell>
<TableCell align="left"></TableCell>
<TableCell align="left"></TableCell>
<TableCell align="left"></TableCell>
<TableCell align="left"></TableCell>
<TableCell align="left"></TableCell>
<TableCell align="left"></TableCell>
<TableCell align="center" colSpan={3}>Jahresplanung {default_year}</TableCell>
<TableCell align="center" colSpan={2}>Real/Ist {default_year}</TableCell>
<TableCell align="center" colSpan={2}>Lead Partner</TableCell>
<TableCell align="center" colSpan={2}>Lead 2</TableCell>
<TableCell align="center" colSpan={2}>Lead 3</TableCell>
<TableCell align="left"></TableCell>
</TableRow>
<TableRow>
<TableCell align="right" colSpan={2}></TableCell>
<TableCell align="left">Proj.Nr.</TableCell>
<TableCell align="left">Kunde</TableCell>
<TableCell align="left">Projektname</TableCell>
<TableCell align="left">Branche</TableCell>
<TableCell align="left">Thema</TableCell>
<TableCell align="left">Einstufung</TableCell>
<TableCell align="right">%</TableCell>
<TableCell align="right">Plan II</TableCell>
<TableCell align="right">Plan III</TableCell>
<TableCell align="right">NK</TableCell>
<TableCell align="right">Honoror</TableCell>
<TableCell align="right">Name</TableCell>
<TableCell align="right">%</TableCell>
<TableCell align="right">Name</TableCell>
<TableCell align="right">%</TableCell>
<TableCell align="right">Name</TableCell>
<TableCell align="right">%</TableCell>
<TableCell align="right">Kommentar</TableCell>
</TableRow>
</TableHead>
<TableBody>
{
leads_list.map((h, index) => {
const lead_plans_totals = h.lead_plans.reduce(
(accumulator, currentDau) => {
return {
probability: accumulator.probability + parseFloat((currentDau.probability || 0)),
plan2: accumulator.plan2 + parseFloat((currentDau.plan2 || 0)),
plan3: accumulator.plan3 + parseFloat((currentDau.plan3 || 0))
};
}, {
probability: 0,
plan2: 0,
plan3: 0
}
);
const offers_totals = h.offers.reduce(
(accumulator, currentDau) => {
return {
addcosts: accumulator.addcosts + parseFloat((currentDau.addcosts || 0)),
fee: accumulator.fee + parseFloat((currentDau.fee || 0))
};
}, {
addcosts: 0,
fee: 0
}
);
return <TableRow key={`mi-${index}`}
className={index % 2 == 0 ? 'grey_row' : ''}>
<TableCell align="right" colSpan={2}>
<IconButton onClick={(e) => this.launchEditContactDialog(e, h)}>
<EditIcon/>
</IconButton>
<IconButton onClick={(e) => this.launchDeleteContactDialog(e, h.id)}>
<DeleteIcon/>
</IconButton>
</TableCell>
<TableCell align="right">{h.projectno}</TableCell>
<TableCell align="right">{h.customername}</TableCell>
<TableCell align="right">{h.projectname}</TableCell>
<TableCell align="right">{h.branch}</TableCell>
<TableCell align="right">{h.theme}</TableCell>
<TableCell align="right">{h.classification}</TableCell>
<TableCell align="right">{lead_plans_totals.probability}</TableCell>
<TableCell align="right">{lead_plans_totals.plan2}</TableCell>
<TableCell align="right">{lead_plans_totals.plan3}</TableCell>
<TableCell align="right">{offers_totals.addcosts}</TableCell>
<TableCell align="right">{offers_totals.fee}</TableCell>
<TableCell align="right">{h.lead1id}</TableCell>
<TableCell align="right">{h.lead1percent}</TableCell>
<TableCell align="right">{h.lead2id}</TableCell>
<TableCell align="right">{h.lead2percent}</TableCell>
<TableCell align="right">{h.lead3id}</TableCell>
<TableCell align="right">{h.lead3percent}</TableCell>
<TableCell align="right">{h.comment}</TableCell>
</TableRow>
})
}
</TableBody>
</Table>
</TableContainer>
</Grid>
<Dialog open={isContactCreateDialogOpen} fullWidth={true} maxWidth={"lg"}>
<DialogTitle id="form-dialog-title" style={{textAlign: 'center'}}>Akquise bearbeiten</DialogTitle>
<DialogContent className="p-60">
<Grid container spacing={1} justify="center" className="LeadsSearchResults">
<Grid item xs={9}>
<Grid container spacing={1}>
<Grid item xs={2} style={{lineHeight: '2.5'}}>
Projekt-Nr.
</Grid>
<Grid item xs={10}>
<TextField
value={createLeadProjectNumber}
select
variant="outlined"
className="select-box"
size="small"
fullWidth
onChange={(e) => this.handleCreateLeadProjectNumberSelect(e)}
>
{projects_list && projects_list.map(project_list => (
<MenuItem key={project_list.id}
value={project_list.id}>{project_list.projectno + " | " + project_list.projectname}</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={2} style={{lineHeight: '2.5'}}>
Kunde
</Grid>
<Grid item xs={10}>
<TextField required fullWidth size="small" value={createLeadCustomerName}
onChange={(e) => this.setState({createLeadCustomerName: e.target.value})}
variant="outlined"/>
</Grid>
</Grid>
<LeadPlans addItem={this.addItem()}/>
<LeadOffers addItem={this.addItem()}/>
</Grid>
<Grid item xs={3}>
<Grid item xs={1} style={{lineHeight: '1.5'}}>
Kommentor
</Grid>
<Grid item xs={11}>
<TextField required fullWidth multiline rows={7} rowsMax={Infinity}
variant="outlined" value={createLeadComment}
onChange={(e) => this.setState({createLeadComment: e.target.value})}/>
</Grid>
</Grid>
<Grid item xs={9}>
</Grid>
</Grid>
</DialogContent>
<DialogActions style={{justifyContent: 'center'}}>
<Button variant="outlined" className="m-10" onClick={this.ValidateContactCustomerForm}
color="primary">
Speichern
</Button>
<Button variant="outlined" className="m-10" onClick={this.closeCreateContactDialog}
color="secondary">
Abbrechen
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
)
}
}
const mapStateToProps = ({leads, branches, classifications, theme}) => {
return {
isloading: leads.loading,
projects_list: leads.projects_list,
users_list: leads.users_list,
branches_list: branches.branches_list,
classifications_list: classifications.classifications_list,
themes_list: theme.themes_list
}
};
const mapDispatchToProps = (dispatch) => {
return {
GetProjectsData: () => dispatch(GetProjectsData()),
GetUsersData: () => dispatch(GetUsersData()),
GetBranches: () => dispatch(GetBranches()),
GetClassifications: () => dispatch(GetClassifications()),
GetThemes: () => dispatch(GetThemes())
}
};
export default connect(mapStateToProps, mapDispatchToProps)(LeadsSearchResults);
import React, {Component} from 'react';
class LeadPlans extends Component {
constructor(props) {
super(props);
this.state = {
isLeadPlanCreateDialogOpen: false,
lead_plans: {
planYear: '',
planProbability: '',
planTwo: '',
planThree: '',
planFees: '',
planAddCosts: ''
}
}
}
launchCreateLeadPlanDialog = () => {
this.setState({isLeadPlanCreateDialogOpen: true});
}
createLeadPlanAndCloseDialog = () => {
const {planYear, planProbability, planTwo, planThree, planFees, planAddCosts} = this.state;
// this.setState(state=>({
// plan_years: [...state.plan_years, rowSet]
// }))
const xyz = {plan_year: planYear, plan_prob: planProbability}
this.props.addItem(xyz)
}
closeCreateContactDialog = () => {
this.setState({
isLeadPlanCreateDialogOpen: false,
});
}
render() {
const {isLeadPlanCreateDialogOpen, planYear, planProbability, planTwo, planThree, planFees, planAddCosts} = this.state;
return (
<React.Fragment>
<Grid item xs={1} style={{lineHeight: '1.5'}}>
Planung
</Grid>
<IconButton>
<AddBoxIcon onClick={() => {
this.launchCreateLeadPlanDialog()
}}/>
</IconButton>
<TableContainer component={Paper}>
<Table size="small" aria-label="dense table">
<TableHead>
// data will be here. Db + form state
</Table>
</TableContainer>
<Dialog open={isLeadPlanCreateDialogOpen} maxWidth="sm">
<DialogTitle id="form-dialog-title" style={{textAlign: 'center'}}>Neve Akquise Planen</DialogTitle>
<DialogContent className="p-60">
<Grid container spacing={1} justify="center">
<Grid item xs={2} style={{lineHeight: '2.5'}}>
Jahr
</Grid>
<Grid item xs={10}>
<TextField
id="year"
fullWidth
value={planYear}
onChange={(e) => this.setState({planYear: e.target.value})}
>
<MenuItem value={'2016'}>2016</MenuItem>
</TextField>
</Grid>
<Grid item xs={2} style={{lineHeight: '2.5'}}>
Probability
</Grid>
<Grid item xs={10}>
<TextField required fullWidth size="small" value={planAddCosts}
onChange={(e) => this.setState({planAddCosts: e.target.value})}
variant="outlined"/>
</Grid>
</Grid>
</DialogContent>
<DialogActions style={{justifyContent: 'center'}}>
<Button variant="outlined" className="m-10" onClick={this.createLeadPlanAndCloseDialog}
color="primary">
Speichern
</Button>
<Button variant="outlined" className="m-10" onClick={this.closeCreateContactDialog}
color="secondary">
Abbrechen
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
)
}
}
export default LeadPlans;
class LeadOffers extends Component {
constructor(props) {
super(props);
this.state = {
isLeadOfferCreateDialogOpen: false,
offers: {
offerDate: '',
offerPaper: '',
offerMail: '',
offerFee: '',
offerDays: '',
offerAddCosts: '',
offerAddCostsInfo: '',
offerDecisionDate: '',
offerDecision: '',
}
}
}
render() {
const {isLeadOfferCreateDialogOpen, offerDate, offerPaper, offerMail, offerFee, offerDays, offerAddCosts, offerAddCostsInfo, offerDecisionDate, offerDecision} = this.state;
return (
<React.Fragment>
<Grid item xs={1} style={{lineHeight: '1.5'}}>
Angebote
</Grid>
<IconButton>
<AddBoxIcon/>
</IconButton>
<TableContainer component={Paper} style={{width: '130%'}}>
<Table size="small" aria-label="dense table">
<TableBody>
// data from db + state will be shown here
</TableBody>
</Table>
</TableContainer>
<Dialog open={isLeadOfferCreateDialogOpen} maxWidth="sm">
<DialogTitle id="form-dialog-title" style={{textAlign: 'center'}}>Offer</DialogTitle>
<DialogContent className="p-60">
<Grid container spacing={1} justify="center">
<Grid item xs={2} style={{lineHeight: '2.5'}}>
Abgabedatum
</Grid>
<Grid item xs={10}>
<TextField
select
id="year"
fullWidth
value={offerDate}
onChange={(e) => this.setState({offerDate: e.target.value})}
/>
</Grid>
<Grid item xs={2} style={{lineHeight: '2.5'}}>
Papier
</Grid>
</Grid>
</DialogContent>
<DialogActions style={{justifyContent: 'center'}}>
<Button variant="outlined" className="m-10" onClick={this.createLeadPlanAndCloseDialog}
color="primary">
Speichern
</Button>
<Button variant="outlined" className="m-10" onClick={this.closeCreateContactDialog}
color="secondary">
Abbrechen
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
)
}
}
export default LeadOffers;
因此，第一个加号单击（“主计划”）：将单击“添加”按钮模态开放式获取值，并且值将显示在表格中（“主计划”）
第二次加价（报价）：单击添加按钮，将打开模型并接受数值，数值将显示在表格中（优惠）
因此，在两种情况下，当我要编辑它们时，我都希望表中包含db值+单击添加按钮时的值。
这是他们的用户界面：
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？