Question

我的自定义组件应将数据传递给react-admin <Create>的父对象我已经遇到了一些问题，发现我不能简单地将状态从子状态设置为父状态。

问题在于此组件应像默认的react-admin组件（例如）一样工作。这意味着我提交表单时会从该组件获取数据。

我已经尝试过addField()

这是我的自定义组件（子组件）：

import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
import { fetchUtils } from 'react-admin';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import { DataService } from '../routes/api';
import PropTypes from 'prop-types';
import { resources as rsrc } from '../resources';

const divStyle = {
  marginTop: '16px',
  marginBottom: '8px',
};

const inputStyle = {
  width: '256px',
}

export default class MultipleSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectOptions: [],
      selectedValues: [],
      selectedValue: null,
    };
  }

  getRoles() {
   // get data from api
  }

  getAllOptions() {
    // get some additional data from API
  }

  createRelationRecord(id) {
    // create relation record (for ex. User's Role)
  }

  deleteRelationRecord(id) {
    // delete relation record
  }

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

  renderSelectOptions = () => {
    return this.state.selectOptions.map((dt, i) => (
      <MenuItem key={dt.id} value={dt.id}>
        {dt.value}
      </MenuItem>
    ));
  };

  handleChange = event => {
    this.setState({ selectedValue: event.target.value });

    // If record doesn't exist
    if (this.state.selectedValue != event.nativeEvent.target.dataset.value) {
      this.createRelationRecord(event.nativeEvent.target.dataset.value);
    }

    if (this.state.selectedValues.includes(Number(event.nativeEvent.target.dataset.value))) {
      this.deleteRelationRecord(event.nativeEvent.target.dataset.value);
    } else {
      this.createRelationRecord(event.nativeEvent.target.dataset.value);
    }
  };

  selectboxType() {
    if (this.props.multiple) {
      return true;
    }
    return false;
  }

  getSelected() {
    if (this.selectboxType()) {
      return this.state.selectedValues;
    }
    return this.state.selectedValue;
  }

  render() {
    return (
      <div style={divStyle}>
        <FormControl>
            <InputLabel htmlFor={this.props.label}>{this.props.label}</InputLabel>
            <Select
              multiple={this.selectboxType()}
              style={inputStyle}
              value={this.getSelected()}
              onChange={this.handleChange}
            >
              {this.renderSelectOptions()}
            </Select>
        </FormControl>
      </div>
    );
  }
}

父母（创建表格）：

export const ServerCreate = props => (
   <Create {...props}>
      <SimpleForm>
         <TextInput source="Name" validate={required()} />
         <ReferrenceSelectBox label="ServerType" multiple={false} source="ServerTypeId" reference="ServerType"></ReferrenceSelectBox>
         <TextInput source="Barcode" validate={required()} />
      </SimpleForm>
   </Create>
);

它与handleChange配合使用以实现数据更新。现在，我需要将选择的数据保存在“创建”表单中，但是handleChange不能帮上忙，因为尚未创建对象，并且无法设置不存在记录的属性。

所以我的问题是如何将组件中的一个或多个值传递给Create？如何设置父母的状态？

Answer 1

您的ServerCreate没有任何状态，但是如果有，您需要传递一个函数，该函数可以将其状态更新为prop的子组件。

一般来说，您可能应该lift the state higher up the component tree

从孩子设置父母的状态

1 个答案: