Reputation: 43
Sandbox: https://codesandbox.io/s/objective-leakey-v1mic?file=/src/App.js
When you click in the "Search" icon on the zipcode field the app fetches "posts/2" from the mockup server (simulating an actual ZIP Code API). I want to update the "address.street" form field with the title of the post -- in this case, write "qui est esse" over "Victor Plains". The title appears on Console (printscreen below).
How do I do it? I've tried useForm
in the Sandbox, it's commented out because it did not work. Actually I've tried a lot of things. I used Delphi 20 years ago, it would be trivial to do it there:
EditStreet.Text := resp.title;
Current code:
import { Edit, SimpleForm, TextInput } from "react-admin";
import { InputAdornment, IconButton } from "@material-ui/core";
import Search from "@material-ui/icons/Search";
import jsonServerProvider from "ra-data-json-server";
//import { useForm } from "react-final-form";
const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
export const UserEdit = (props) => {
const HandleClick = () => {
//const { change } = useForm();
//var newStreet = "";
dataProvider
.getList("posts", {
sort: { field: "id", order: "ASC" },
pagination: { page: 1, perPage: 50 },
filter: { id: 2 }
})
.then((response) => {
var resp = response.data[0];
console.log(resp);
//--- how to update the screen?
//newStreet = resp.title;
// EditStreet.Text := resp.title;
//change("address.street", newStreet);
})
.catch((e) => {
console.log(e.message);
});
//change("address.street", newStreet);
};
return (
<Edit {...props}>
<SimpleForm>
<TextInput source="id" />
<TextInput source="name" />
<TextInput
source="address.zipcode"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={HandleClick}>
<Search />
</IconButton>
</InputAdornment>
)
}}
/>
<TextInput source="address.street" />
<TextInput source="address.suite" />
<TextInput source="address.city" />
</SimpleForm>
</Edit>
);
};
Is there a simple way to do it with React-Admin? By "simple" I mean less than 20 lines of code.
Upvotes: 0
Views: 807
Reputation: 43
I've managed to make it work. Here's the new code:
import { Edit, SimpleForm, TextInput } from "react-admin";
import { InputAdornment, IconButton } from "@material-ui/core";
import Search from "@material-ui/icons/Search";
import jsonServerProvider from "ra-data-json-server";
import { useForm } from "react-final-form";
const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
export const ZipLookUp = ({ record }) => {
const form = useForm();
const HandleClick = (event) => {
console.log("record", record);
console.log("event", event);
dataProvider
.getList("posts", {
sort: { field: "id", order: "ASC" },
pagination: { page: 1, perPage: 50 },
filter: { id: 2 }
})
.then((response) => {
var resp = response.data[0];
console.log(resp);
//--- how to update the screen?
form.change("name", resp.title);
})
.catch((e) => {
console.log(e.message);
});
};
return (
<TextInput
source="address.zipcode"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={HandleClick}>
<Search />
</IconButton>
</InputAdornment>
)
}}
/>
);
};
export const UserEdit = (props) => {
return (
<Edit {...props}>
<SimpleForm {...props}>
<TextInput source="id" />
<TextInput source="name" />
<ZipLookUp />
<TextInput source="address.street" />
<TextInput source="address.suite" />
<TextInput source="address.city" />
</SimpleForm>
</Edit>
);
};
Here's the updated Sandbox:
https://codesandbox.io/s/still-lake-8p9sx?file=/src/users.js
Upvotes: 1