我正在使用 react-admin
框架,我正在尝试动态更新我的输入值。
在我的自定义组件中,我有 onChange()
方法,如下所示:
onChange = (value) => {
this.setState({ currentForm: this.props.record });
const { updated_src, name, namespace, new_value, existing_value } = value;
this.setState({ currentForm: updated_src });
}
首先,我设置状态 currentForm
具有存储在 this.props.record
中的原始未编辑值。之后,我将状态设置为新值 updated_src
。该变量存储具有新编辑值的对象。 this.props.record
和 updated_src
这两个对象具有相同的键。
稍后在 render()
中我有这个字段:
{this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} displayObjectSize={false} onEdit={this.onChange} />}
但是,如果我在 onChange()
方法中执行 console.log(this.state.currentForm);
,它会返回一个空数组而不是更新后的对象字段的值。
我的整个组件:
import React, { Component, Fragment } from 'react';
import { fetchUtils, CardActions, EditButton, Button, List, Datagrid, Edit } from 'react-admin';
import Drawer from '@material-ui/core/Drawer';
import JsonInput from 'react-json-view';
import { Field } from 'redux-form';
import EditIcon from '@material-ui/icons/Edit';
import IconKeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import { SimpleForm } from 'ra-ui-materialui/lib/form';
const divStyle = {
width: '400px',
margin: '1em'
};
export default class JsonEditButton extends Component {
constructor(props, context) {
super(props, context);
this.state = { showPanel: false , currentForm: []};
}
onChange = (value) => {
//that works
this.setState({ currentForm: this.props.record }, () => {
const { updated_src, name, namespace, new_value, existing_value } = value;
/* sets the updated values to state */
this.setState({ currentForm: value.updated_src });
});
}
handleClick = () => {
this.setState({ showPanel: true });
};
handleCloseClick = () => {
this.setState({ showPanel: false });
};
render() {
const { showPanel } = this.state;
return (
<div>
<Button label="Upravit JSON" onClick={this.handleClick}>
<EditIcon />
</Button>
<Fragment>
<Drawer
anchor="right"
open={showPanel}
onClose={this.handleCloseClick}
>
<div>
<Button label="Zavřít" onClick={this.handleCloseClick}>
<IconKeyboardArrowRight />
</Button>
</div>
<div style={divStyle}>
{this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} onKeyPressUpdate={true} displayObjectSize={false} onEdit={this.onChange} />}
</div>
</Drawer>
</Fragment>
</div>
);
}
};
为什么这段代码不起作用以及如何解决这个问题有什么想法吗?
提前谢谢你。
最佳答案
onChange = (value) => {
this.setState({ currentForm: this.props.record },()=>{
console.log("---currentForm------ >",
this.state.currentForm,this.props.record)
this.callFn(value)
});
}
callFn = (value) => {
const { updated_src, name, namespace, new_value, existing_value } = value;
this.setState({ currentForm: updated_src },()=>{
console.log("---->newData",this.state.currentForm,updated_src)
});
}
尝试这种方式,我认为它应该有所帮助, 只需检查这个控制台,您就会知道,为什么您的阵列没有更新
https://stackoverflow.com/questions/58008167/
相关文章:
gitlab - 任何人都可以发布具有外部子模块的 GitLab CI 的工作示例吗?
python - DRF 序列化程序字段重命名为其在验证数据中的源
python - 在单元测试中使用补丁模块时,自动完成 pycharm 不起作用
flutter - NestedScrollView with tabbarview scrolli
matplotlib - plt.show() 后不显示绘图,未给出错误 'and only sho
python - 如何在 seaborn python 中组合两个 relplots?
c# - Windows 后台打印驱动程序 - 状态请求发送不正确
python - 在pygame中检测键盘输入时只有某些键起作用