IT技术 - 更新已编辑输入的值 - 吾爱随笔录

我正在使用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} />}

但是，如果我console.log(this.state.currentForm);在该onChange()方法中执行此操作，它将返回一个空数组，而不是具有该字段更新值的对象。

我的整个组件：

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>
  );
 }
};

任何想法为什么此代码不起作用以及如何解决此问题？

先感谢您。