我正在使用Admin-on-rest(1.3.2),并且我尝试使用输入文本字段和“保存”来构建自定义列表视图。按钮。
点击'保存'我希望它获取当前行的输入字段中的所有值并将其发送到后端。
我努力分享这些领域的状态,以便“拯救”。按钮将获得这些值,并建议。
import React from 'react';
import {Datagrid, List} from 'admin-on-rest'
import TextField from 'material-ui/TextField/TextField.js';
import RaisedButton from 'material-ui/RaisedButton';
export const PostList = (props) => (
<List title="IMDB Top Feature Films 2017" {...props}>
<Datagrid>
<InputTextField source="id"/>
<InputTextField source="title"/>
<InputTextField source="body"/>
<SaveButton />
</Datagrid>
</List>
);
const InputTextField = ({source, record = {}}) => <TextField defaultValue={record[source]}/>;
const SaveButton = ({source, record = {}}) => <RaisedButton label="Save"/>;
带输入字段示例的列表:
答案 0 :(得分:1)
import React from 'react';
import {Datagrid, List} from 'admin-on-rest'
import TextField from 'material-ui/TextField/TextField.js';
import RaisedButton from 'material-ui/RaisedButton';
export class PostList extends React.Component {
constructor() {
this.state = {
id: "",
title: "",
body: "",
};
}
setValueInState = (field, value) => {
this.setState({
[field]: value
});
};
save = () => {
const {id, title, body} = this.state;
// write your saving log here
};
render() {
return (
<List title="IMDB Top Feature Films 2017" {...props}>
<Datagrid>
<InputTextField setValueInState={setValueInState} source="id"/>
<InputTextField setValueInState={setValueInState} source="title"/>
<InputTextField setValueInState={setValueInState} source="body"/>
<SaveButton save={save} />
</Datagrid>
</List>
);
}
}
const InputTextField = ({source.setValueInState, record = {}}) => <TextField defaultValue={record[source]} onChange={setValueInState}/>;
const SaveButton = ({source, record = {}}) => <RaisedButton label="Save"/>;
请检查括号。想法与我在代码中展示的类似。