Question

我有一个更新对话框组件，需要更新一些值。我的更新对话框如下所示。

class EditWebsiteComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }
    handleChange = name => event => {
        let temp = this.props.selectedWebsite;
        temp[name] = event.target.value;
        console.log(temp);
        this.props.changesSelectedWebsite(temp);
        // this.setState({
        //     [name]: event.target.value,
        // });
    };
    onFileChange = event => {
        this.setState({ logo: event.target.files[0] });
    };


    render() {
        const openDialog = this.props.openDialog;
        const {selectedWebsite} = this.props;

        return (
            <div>
                {/*{this.props.selectedWebsite && this.props.selectedWebsite.title}*/}
                <Dialog
                    fullWidth={true}
                    open={openDialog}
                    onClose={this.props.closeDialog}
                >
                    <DialogTitle>
                        {"Edit Website"}
                    </DialogTitle>
                    <DialogContent>
                        <FormControl className="w-100">
                            <TextField
                                style={{'margin-right': "10px"}}
                                className="col-md-11 col-11"
                                id="name"
                                label="Title"
                                value={selectedWebsite.title}
                                onChange={this.handleChange('title')}
                                margin="normal"
                                fullWidth
                            />
                            <TextField
                                style={{'margin-right': "10px"}}
                                className="col-md-11 col-11"
                                id="name"
                                label="URL"
                                value={selectedWebsite.url}
                                onChange={this.handleChange('url')}
                                margin="normal"
                                fullWidth
                            />
                            <div style={{"margin-top": "20px"}} className='col-md-11 col-11 flex-class-custom'>
                                <input type="file" onChange={this.onFileChange} />
                            </div>
                        </FormControl>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.props.closeDialog} color="secondary">
                            Close
                        </Button>
                        <Button onClick={() =>
                            this.props.editWebsite({title: selectedWebsite.title, url:selectedWebsite.url, logo:selectedWebsite.logo, id:selectedWebsite.id})
                        } color="primary">
                            Edit
                        </Button>
                    </DialogActions>
                </Dialog>
                {this.props.showMessage && NotificationManager.error(this.props.alertMessage)}
                <NotificationContainer/>
            </div>
        )
    }
}



const mapDispatchToProps = dispatch => ({
    editWebsite: (payload) => dispatch(editWebsite(payload)),
    changesSelectedWebsite: (payload) => dispatch(changesSelectedWebsite(payload))
});

const mapStateToProps = state => ({
    selectedWebsite : state.Websites.selectedWebsite,
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(EditWebsiteComponent)

我从选定的网站上获取当前值，并且在更改时，我通过调度changesSelectedWebsite操作来更新道具，但是对话框形式并未更新，尽管道具正在更新。我对响应和还原感到很陌生，所以我想问一下这种方法是否正确？以及我还能如何实现此目标，因为我需要selectedWebsites的值，并且如果用户进行了任何更改也需要更新。

Answer 1

您可以尝试更改此行

this.props.changesSelectedWebsite(temp);

到

this.props.changesSelectedWebsite({...temp});

只要您在不“重新创建” prop值的情况下原样获得prop值，状态就不会感觉到变化，所以{... temp}重新创建对象，为什么？因为它告诉状态这是一个新对象，并触发重新渲染并保存新状态。

如何使用道具来更新我的ReactJS表单

1 个答案: