如何解决如何使用道具来更新我的ReactJS表单
我有一个更新对话框组件,需要更新一些值。我的更新对话框如下所示。
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的值,并且如果用户进行了任何更改也需要更新。
解决方法
您可以尝试更改此行
this.props.changesSelectedWebsite(temp);
到
this.props.changesSelectedWebsite({...temp});
只要您在不“重新创建” prop值的情况下原样获得prop值,状态就不会感觉到变化,所以{... temp}重新创建对象,为什么?因为它告诉状态这是一个新对象,并触发重新渲染并保存新状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。