如何从自定义组件获取数据？

Question

我的模型文件中有一个编辑操作。我正在使用默认的react-admin组件，不幸的是，我必须创建我的自定义组件，并且在提交表单后，没有提供该自定义组件的数据。

我试图将整个组件包装在<FormControl>内，但对我来说却不成功。

我的组件

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Chip from '@material-ui/core/Chip';
import { fetchUtils } from 'react-admin';

const styles = theme => ({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    formControl: {
      margin: theme.spacing.unit,
      minWidth: 120,
      maxWidth: 300,
    },
    chips: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    chip: {
      margin: theme.spacing.unit / 4,
    },
    noLabel: {
      marginTop: theme.spacing.unit * 3,
    },
  });

  const ITEM_HEIGHT = 48;
  const ITEM_PADDING_TOP = 8;
  const MenuProps = {
    PaperProps: {
      style: {
        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
        width: 250,
      },
    },
  };

  function getStyles(name, that) {
    return {
      fontWeight:
        that.state.name.indexOf(name) === -1
          ? that.props.theme.typography.fontWeightRegular
          : that.props.theme.typography.fontWeightMedium,
    };
  }

var names = [];

class MultipleSelect extends React.Component {
    state = {
        name: [
        ]
    };

    getRoles() {
        const url = 'URLTOENDPOINT'
        var data = [];
        fetchUtils.fetchJson(url, {
            method: "GET",
        })
        .then(response => {
            Object.keys(response.json.value).forEach(function (key) {
                var object = response.json.value[key];
                data.push({
                  name: object.Name,
                  value: object.Id
                });
            })
            this.setState({name: data});
        });
    }

    getAllOptions() {
      const url = 'URLTOENDPOINT'
      var data = [];
      fetchUtils.fetchJson(url, {
          method: "GET",
      })
      .then(response => {
          Object.keys(response.json.value).forEach(function (key) {
              var object = response.json.value[key];
              data.push({
                name: object.Name,
                value: object.Id
              });
          })
          names = data;
      });
  }

    componentDidMount() {
        this.getRoles();
        this.getAllOptions();
        this.forceUpdate();
    }

    handleChange = event => {
      console.log("y",event);
      this.setState({ name: event.target.value });
    };

    render() {
      const { classes } = this.props;

      return (
        <div>
            <FormControl>
                <InputLabel htmlFor="UserRoles">Chip</InputLabel>
                <Select
                    multiple
                    value={this.state.name}
                    onChange={this.handleChange}
                    input={<Input id="UserRoles" />}
                    renderValue={selected => (
                    <div className={classes.chips}>
                        {selected.map(obj => (
                          <Chip key={obj.value} label={obj.name} className={classes.chip} />
                        ))}
                    </div>
                    )}
                    MenuProps={MenuProps}
                >
                    {names.map(obj => (
                      <MenuItem key={obj.value} value={obj.value} style={getStyles(obj.name, this)}>
                          {obj.name}
                      </MenuItem>
                    ))}
                </Select>
            </FormControl>
        </div>
      );
    }
  }

  MultipleSelect.propTypes = {
    classes: PropTypes.object.isRequired,
  };

  export default withStyles(styles, { withTheme: true })(MultipleSelect);

EditAction：

export const UserEdit = props => (
  <Edit {...props} title={<UserTitle/>} aside={<Aside />}>
    <SimpleForm>
      <DisabledInput source="Id" />
      <TextInput source="Login" validate={required()} />
      <TextInput source="Email" type="email" validate={required()} />

      <ReferrenceSelectBox source="UserRoles" />

      <NullableBooleanInput source="Active" />
      <DateField source="CreatedDate" showTime
        locales={process.env.REACT_APP_LOCALE}
        disabled={true} />
    </SimpleForm>
  </Edit>
);

我需要显示具有来自API的选定数据的多个选择框，所以我写了自定义组件，因为默认组件没有帮助我，但是它没有改变任何内容，并且数据也没有显示。