Admin-on-restのクライアント側のリストビューで「レコード」オブジェクトを編集する方法はありますか？

Question

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

一覧：

Answer 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"/>; 

括弧をチェックしてください。アイデアは私がコードで示したのと同様の行にあります。