时间戳

首页 > 解决方案 > 在 Drawer 组件内编辑组件

reactjs - 在 Drawer 组件内编辑组件

问题描述

我正在使用react-admin框架，并且试图将<Edit>组件放入<Drawer>组件中。我需要这个才能保存在我的JsonInput.

这是我的自定义组件：

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 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 React.Component {
 constructor(props, context) {
  super(props, context);
  this.state = { showPanel: false };
 }

  handleClick = () => {
    this.setState({ showPanel: true });
  };

  handleCloseClick = () => {
    this.setState({ showPanel: false });
  };

  onChange = (value) => {
    const { updated_src, name, namespace, new_value, existing_value } = value;
    //this.onChange(updated_src);
  }

 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}>
            {props => (
              <Edit {...props}>
                <SimpleForm>
                  {this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} displayObjectSize={false} onEdit={this.onChange} onAdd={this.onChange} onDelete={this.onChange} />}
                </SimpleForm>
              </Edit>
            )}
          </div>
        </Drawer>
      </Fragment>
    </div>
  );
 }
};

但是，这不会返回任何HTML.

知道如何解决这个问题吗？

先感谢您。

标签： reactjsformsreact-admin

解决方案

也许这可能会有所帮助

<div style={divStyle}>

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

 </div>

前面的代码{props => ()}实际上是一个函数，或者你可以试试这个

<div style={divStyle}>
            {props => (
              return(
              <Edit {...props}>
                <SimpleForm>
                  {this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} displayObjectSize={false} onEdit={this.onChange} onAdd={this.onChange} onDelete={this.onChange} />}
                </SimpleForm>
              </Edit>)
            )}
          </div>

推荐阅读