Question

我想从包含表单的子组件更新父组件中的js对象我的父组件中的功能。

 getnewDataFirstGroup = (labelValue, typeValue, viewNameValue,todayMeasureValue, seasonLevelValue, numPosInSeasonValue, numSeasonsInYearValue) => {
        this.setState({
            newDatafirstG: {
                label: labelValue,
                type: typeValue,
                viewName: viewNameValue,
                todayMeasure: todayMeasureValue,
                seasonLevel: seasonLevelValue,
                numPosInSeason: numPosInSeasonValue,
                numSeasonsInYear:numSeasonsInYearValue,
                chartDefaultLevel:seasonLevelValue
            }
        })
    }

getStepContent(steps) {
        switch (steps) {
            case 0:
                return <FirstGroup folder={this.props.folder}  onDataChange={this.getnewDataFirstGroup} />
            case 1:
                return <SecondGroup folder={this.props.folder}  change={this.getnewDataSecondGroup} />;
            case 2:
                return <PreviewFile content={<ReactJson src={this.state.file} />} />;
            default:
                throw new Error('Unknown step');
        };
    }

您在这里看到的我正在尝试从组件First Group更新newdatafirstG。第一组组件的代码：

        if (this.state.profileLabel && this.state.season && this.state.viewname && this.state.todayMeasure && this.state.seasonlevel && this.state.numPosSeason && this.state.numPosYear) {
            this.props.onDataChange(this.state.profileLabel,this.state.season,this.state.viewname,this.state.todayMeasure,this.state.seasonlevel,this.state.numPosSeason,this.state.numPosYear )
        }
    }

子组件的渲染

render() {
        const { classes } = this.props;
        const vienwnameArray = this.listWorsheetsForm();
        const seasonsLevel = this.ListSeasonLevel();
        return (
            <React.Fragment>
                <div>
                    <Typography variant="h6" gutterBottom>
                        First Group
                    </Typography>
                </div>
                <Grid container spacing={3}>
                    <Grid item xs={10} sm={11}>
                        <TextField
                            required
                            id="label"
                            name="profileLabel"
                            label="Profile Label"
                            value={this.state.profileLabel}
                            onChange={this.handleChangeLabel}
                            fullWidth
                            autoComplete="given-name"
                        />
                    </Grid>
                    <Grid item xs={12} sm={6} >
                        <FormControl required className={classes.formControl} >
                            <InputLabel id="profileType">Profile Type</InputLabel>
                            <Select
                                labelId="Type"
                                id="profileType"
                                onClose={this.handleCloseselect}
                                onOpen={this.handleOpenselect}
                                value={this.state.season}
                                onChange={this.handleChangeSeason}
                            >
                                <MenuItem value={'Pre-Season'}>Pre-Season</MenuItem>
                                <MenuItem value={'In-Season'} >In-Season</MenuItem>
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <FormControl required className={classes.formControl} >
                            <InputLabel id="viewname">View Name</InputLabel>
                            <Select
                                labelId="viewname"
                                id="vienwname"
                                onClose={this.handleCloseselect}
                                onOpen={this.handleOpenselect}
                                value={this.state.viewname}
                                onChange={this.handleChangeViewname}
                            >
                                {vienwnameArray.map((element, index) => (<MenuItem key={`${index}`} value={element}>{element}</MenuItem>))}
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <FormControl required className={classes.formControl} >
                            <InputLabel id="measure">Today Measure</InputLabel>
                            <Select
                                labelId="measure"
                                id="measure"
                                onClose={this.handleCloseselect}
                                onOpen={this.handleOpenselect}
                                value={this.state.measure}
                                onChange={this.handleChangeMeasure}
                            >
                                {this.state.measuresArray.map((element, index) => (<MenuItem key={`${index}`} value={element}>{element}</MenuItem>))}
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <FormControl required className={classes.formControl} >
                            <InputLabel id="season">Season Level</InputLabel>
                            <Select
                                labelId="season"
                                id="seasonlevel"
                                onClose={this.handleCloseselect}
                                onOpen={this.handleOpenselect}
                                value={this.state.seasonlevel}
                                onChange={this.handleChangeSeasonlevel}
                            >
                                {seasonsLevel.map((element, index) => (<MenuItem key={`${index}`} value={element}>{element}</MenuItem>))}
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <FormControl required className={classes.formControl} >
                            <InputLabel id="numPS">Num Position in Season</InputLabel>
                            <Select
                                labelId="numPS"
                                id="PosSeason"
                                onClose={this.handleCloseselect}
                                onOpen={this.handleOpenselect}
                                value={this.state.numPosSeason}
                                onChange={this.handleChangePosSeason}
                            >
                                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24].map((element, index) => (<MenuItem key={`${index}`} value={element}>{element}</MenuItem>))}
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <FormControl required className={classes.formControl} >
                            <InputLabel id="numPY">Num Position in Year</InputLabel>
                            <Select
                                labelId="numPY"
                                id="seasonlevel"
                                onClose={this.handleCloseselect}
                                onOpen={this.handleOpenselect}
                                value={this.state.numPosYear}
                                onChange={this.handleChangePosYear}
                            >
                                {[1, 2, 3, 4].map((element, index) => (<MenuItem key={`${index}`} value={element}>{element}</MenuItem>))}
                            </Select>
                        </FormControl>
                    </Grid>
                </Grid>
                {this.sendFirstGroupData()}
            </React.Fragment>
        );
    };

我如何以子组件中存在的父组件forom形式更新我的状态？

Answer 1

根据我的经验，要从子组件更新父组件，您必须在父updateParent()中创建一个函数。

然后，您可以将此功能作为prop传递给孩子。

孩子将随后调用此函数：this.props.updateParent(..values)

我希望这会有所帮助。如果您还需要更多，我可以稍后再举一个例子！

尝试从子froms更新对象？反应js

1 个答案: