更新已编辑输入的值 [英] Update values of edited inputs

问题描述

我正在使用react-admin框架，并且试图动态更新输入的值.

I am using react-admin framework and I am trying to update values of my input dynamically.

在我的自定义组件中，我具有如下所示的onChange()方法:

In my custom component, I have the onChange() method which looks like this:

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具有相同的键.

First I am setting that the state currentForm has the original unedited values that are stored in this.props.record. After that I am setting that the state has new value updated_src. That variable stores the object with the new edited values. Both objects this.props.record and updated_src have same keys.

稍后在render()中，我具有以下字段:

Later in render() I have this field:

{this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} displayObjectSize={false} onEdit={this.onChange} />}

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

However if I do console.log(this.state.currentForm); in the onChange() method, it returns an empty array instead of the object with updated values of the field.

我的整个组件:

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

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

Any ideas why this code is not working and how to solve this issue?

谢谢.

推荐答案

React setState()方法是异步的，只有在onChange()处理函数完成后才能完成！

The React setState() method is asynchronous and only completes after your onChange() handler has completed!

这篇关于更新已编辑输入的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！