Reputation: 21
I'm using Admin-on-rest (1.3.2) and I'm trying to build a custom list view with input text fields and a 'Save' button.
By clicking 'Save' I want it to take all the values in the input fields for the current row and send it to the backend.
I'm struggling to share the fields state so that the 'Save' button will get those values and do it propose.
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:
Upvotes: 2
Views: 1093
Reputation: 3687
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"/>;
Please check for the brackets. Idea is on the similar lines that I showed in the code.
Upvotes: 2