Question

我正在尝试修改子组件内部的某些状态参数，然后将其传递给父组件使用。

我有一个称为驱动程序的状态对象。在我的EditDriver组件内部，我正在调用ProfileTab并将其传递给具有firstName之类的字段的驱动程序对象。我在ProfileTab内进行实际修改。在父组件EditDriver的内部，我需要在updateDriver函数中将此数据发送到服务器。

//...imports
class EditDriver extends Component {
constructor(props) {
    super(props);

    this.state = {
        driver: {
            firstName: '',
        },
    };
this.updateDriver = this.updateDriver.bind(this);
this.driverOnChange = this.driverOnChange.bind(this);
}

updateDriver() {
                this.props.updateDriver(this.state.driver);
    }


driverOnChange(data) {
    this.setState({
        driver: data
    });
}

render() {
    return (
        <ViewContainer
            fullWidth
            title="Driver"
            toolbarRight={
                <Button
                    onClick={this.updateDriver}
                >
                    Save
                </Button>
            }
        >
            <ProfileTab match={this.props.match} driver={this.state.driver} driverOnChange={this.driverOnChange} />}

        </ViewContainer>
    );
}
}
const mapDispatchToProps = dispatch => ({
    updateDriver: driver => dispatch(updateDriver(driver))
});

export default connect(
    null,
    mapDispatchToProps,
)(withStyles(styles)(EditDriver));

和ProfileTab代码如下：

class ProfileTab extends Component {
constructor(props) {
    super(props);

    this.state = {
        driver: {
            firstName: '',
        },
        };

    this.handleDriverInputChange = this.handleDriverInputChange.bind(this);
    }


componentWillReceiveProps(nextProps) {
    if (nextProps.driver && !nextProps.isFetching) {

        this.setState({
            driver: {
                ...this.state.driver,
                ...nextProps.driver
            }
        });
    }
}

handleDriverInputChange(event) {
    const target = event.target;
    const value = target.type == 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
        driver: {
            ...this.state.driver,
            [name]: value
        }
    });
}


render() {
    const {
        driver,
    } = this.state;

    return (
        <div>
                    <TextField
                        name="firstName"
                        label="firstName"
                        margin="normal"
                        type="text"
                        onChange={this.handleDriverInputChange}
                        value={driver.firstName}
                    />
        </div>
    );
}
}


ProfileTab.propTypes = {
driver: PropTypes.object.isRequired,
driverOnChange: PropTypes.func.isRequired,
};

export default ProfileTab;

driverOnChange函数实际上并未在ProfileTab中设置驱动程序参数的状态。在EditDriver组件中呈现ProfileTab并使更改的参数firstName可用的最有效方法是什么？

Answer 1

只需在ProfileTab组件内的此方法中调用driverOnChange

handleDriverInputChange(event) {
    const target = event.target;
    const value = target.type == 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.props.driverOnChange(value);

    this.setState({
        driver: {
            ...this.state.driver,
            [name]: value
        }
    });
}

您已将driverOnChange绑定到EditDriver组件，因此即使在ProfileTab组件中被调用，我也认为driverOnChange中的this会引用它

修改子级组件中的数据，并使其作为道具在父级中可用

1 个答案: