Reactjs 从子级设置父级的状态
我的自定义组件应该将数据传递给父级,该父级是react admin 我已经遇到了一些问题,发现我不能简单地将状态从孩子设置为家长 问题是这个组件应该像默认的react admin组件一样工作。这意味着当我提交表单时,它会从该组件获取数据 我已经试过了 这是我的自定义组件子项: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/
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表单的组件,以便处理值更新周期: