有没有办法编辑'记录' Admin-on-rest中客户端列表视图中的对象?

时间:2017-12-24 08:47:33

标签: reactjs admin-on-rest

我正在使用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"/>;

带输入字段示例的列表:

List with input field example

1 个答案:

答案 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"/>;

请检查括号。想法与我在代码中展示的类似。