Reactjs 从子级设置父级的状态

Reactjs 从子级设置父级的状态,reactjs,react-admin,Reactjs,React Admin,我的自定义组件应该将数据传递给父级,该父级是react admin 我已经遇到了一些问题,发现我不能简单地将状态从孩子设置为家长 问题是这个组件应该像默认的react admin组件一样工作。这意味着当我提交表单时,它会从该组件获取数据 我已经试过了 这是我的自定义组件子项: import React from "react"; import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/

我的自定义组件应该将数据传递给父级,该父级是react admin 我已经遇到了一些问题,发现我不能简单地将状态从孩子设置为家长

问题是这个组件应该像默认的react admin组件一样工作。这意味着当我提交表单时,它会从该组件获取数据

我已经试过了

这是我的自定义组件子项:

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一起实现数据更新。现在我需要将所选数据保存在Create表单中,但handleChange对我没有帮助,因为该对象尚未创建,并且我无法设置不存在记录的属性

因此,我的问题是如何将组件中的值传递给Create?如何设置父组件的状态?

您的ServerCreate没有任何状态,但如果有,则需要将一个函数作为道具传递给子组件,该函数可以更新其状态

一般来说,您可能应该

您的ServerCreate没有任何状态,但如果有,您需要将一个函数作为道具传递给子组件,该函数可以更新其状态


一般来说,您可能应该

如果ServerCreate没有状态,我如何从自定义组件do create传递数据?是的,这是由您使用react admin所限制的,react admin应用了自己的魔力,我不熟悉。您正在尝试创建自定义输入组件吗?根据文档:您必须依赖redux表单的组件,以便处理值更新周期。注意:如果ServerCreate没有状态,我如何从自定义组件do create传递数据?是的,这一切都受到您使用react admin的限制,react admin应用了自己的魔法,我不熟悉。您正在尝试创建自定义输入组件吗?根据文档:您必须依赖redux表单的组件,以便处理值更新周期: