如何使用属性更新我的表单Reactjs

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操作来更新属性，但对话框表单没有更新，尽管属性正在更新。我对react和redux还很陌生，所以我想问一下这种方法是否正确？除此之外，我还能如何实现这一点，因为我需要selectedWebsites的值，并且还需要在用户更改任何内容时进行更新。

Answer 1

你能试着换一下这行吗？

this.props.changesSelectedWebsite(temp);

至

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

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