When using TabbedForm in react-admin, Create view will remove input value when switch tab. It doesn't happend with Edit view.
In redux state, ##redux-form/INITIALIZE action is the different between 2 views. Anyone has any idea why?
<Create {...props}>
<TabbedForm>
<FormTab label="rate">
<TextInput source="name" label="Name"/>
<NumberInput source="rate" label="Rate" defaultValue="0" />
</FormTab>
<FormTab label="score">
<TextInput source="score" label="Score"/>
<NumberInput source="number" label="Number" defaultValue="0" />
</FormTab>
</TabbedForm>
</Create>
Related
Hello stackoverflow so I have a custom components inside of my create simpleform looking like this.
<Create {...props}>
<SimpleForm {...props}>
<TextField id="standard-basic" onChange={onChangeLabel} value={entityLabel} placeholder="Audience label" />
<br />
<EntityInput onSelectEntity={addEntity} entityNames={entityNames} />
<TagInput setSelectedTags={addSelectedTag} selectedTags={selectedTags} />
<br />
</SimpleForm>
</Create>
My question is how do I enable the save button and pass in custom data and tell the save button which records to create?
Have spent several hours trying to get ReferenceManyField to display some data in a nested DataGrid.
<Show {...this.props}>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="name" />
{/* THE FOLLOWING COMPONENT DOES NOT DISPLAY ANY DATA. WHY NOT??? */}
<ReferenceManyField label="Stores" reference="stores" target="companies_id">
<Datagrid rowClick="show">
<TextField source="id" />
<TextField source="storeName" />
</Datagrid>
</ReferenceManyField>
</SimpleShowLayout>
</Show>
I have created a massively stripped down version of my app, which demonstrates the problem:
https://codesandbox.io/s/react-admin-referencemanyfield-issue-forked-lde6c
I am certain there has to be a simple explanation for this issue, but as a relative newcomer to React/ReactAdmin/Typescript I just can't see it. What am I doing wrong?
Grateful for any tips & advice.
You haven't declared the stores resource in your Admin component.
Add a <Resource name="stores" /> inside Admin
As the title says. I need to use a ReferenceField inside of a ArrayInput/SimpleFormIterator. I keep getting the following error:
TypeError: Cannot read property 'replace' of undefined
Versions:
react-admin: 3.2.3
react: 16.12.0
Here is a snippet of the code:
<ArrayInput source="specialties" label="">
<SimpleFormIterator disableAdd>
<ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
<TextField source="ID" />
</ReferenceField>
<TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
</SimpleFormIterator>
</ArrayInput>
There is a resource called specialty and this works inside of an ArrayField in other parts of the application like so:
<ArrayField source="specialties" label=" Specialties">
<SingleFieldList>
<ReferenceField label="Specialties Link" source="ID" reference="specialty" link="show" >
<TextField source="ID" />
</ReferenceField>
</SingleFieldList>
</ArrayField>
Not sure if this just isn't possible within this framework or if I'm implementing this wrong. If there is a way to fix this or a different want to go about this please let me know! Thanks.
From the documentation:
Note: SimpleFormIterator only accepts Input components as children. If you want to use some Fields instead, you have to use a <FormDataConsumer> to get the correct source,..."
import { ArrayInput, SimpleFormIterator, DateInput, TextInput, FormDataConsumer } from 'react-admin';
<ArrayInput source="backlinks">
<SimpleFormIterator disableRemove >
<DateInput source="date" />
<FormDataConsumer>
{({ getSource, scopedFormData }) => {
return (
<TextField
source={getSource('url')}
record={scopedFormData}
/>
);
}}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
or include input fields
<ArrayInput source="specialties" label="">
<SimpleFormIterator disableAdd>
<ReferenceInput label="Specialties Link" source="ID" reference="specialty">
<SelectInput optionText="{Your description field}" />
</ReferenceInput>
<TextInput source="vendorSpecialtyText" label="Vendor Specialty Text" />
</SimpleFormIterator>
</ArrayInput>
I am using react-admin to work for my program.
when I use the ,I do not know how to set the backgroundColor of row when i click it.
const rowStyle = record => ({
backgroundColor:
record.id === window.location.pathname.split('/')[2] ? '#e0e0e0' : '',
});
<List
{...props}
bulkActions={false}
actions={<ListActions />}
exporter={exporter}
pagination={<Pagination />}
filters={<SaleInventoryFilter />}
>
<Datagrid rowClick="show" rowStyle={rowStyle}>
<TextField source="item.code" label="Item code" />
<TextEllipsisField
source="item.name"
label="Item name"
cellClassName={classes.name}
/>
<TextField source="stockLocation.name" label="Stock location" />
<TextField source="batch" />
<TextField source="leadTime" label="Lead time (days)" />
<TextField source="onHandQty" label="On hand" />
<TextField source="availableQty" label="Available" />
<TextField source="reservedQty" label="Reserved" />
<DateField
source="updatedAt"
label={`Updated At (${getOffsetByTimezone()})`}
/>
<OperationButton />
</Datagrid>
</List>
Above is my work, but it works always have delay.
It need to wait re-render of component.
I expect when I click the row the row backgroundColor will change to red immediately whether the component have re-render.
I am building a profile page and have the following components.
1. I have a image picker for the profile picture
2. ListView with text fields and a button
And i have a bottom bar navigation. With the current implementation the bottom tab bar hides the button at the bottom, and i am not able to figure out a way to solve this. Any help would be appreciated. Below is the code snippet,
render(){
let {phone} = this.state,
{studentName}=this.state,
{studentClass}=this.state,
{bloodGroup}=this.state,
{parentName}=this.state,
{email}=this.state,
{sibling}=this.state,
{siblingClass}=this.state,
{address}=this.state;
return(
<View style={styles.studentInfo}>
<TextField
label='Student Name'
value={studentName}
onChangeText={(studentName)=>this.setState({studentName})}
/>
<TextField
label='Class'
value={studentClass}
onChangeText={(studentClass)=>this.setState({studentClass})}
/>
<TextField
label='Blood Group'
value={bloodGroup}
onChangeText={(bloodGroup)=>this.setState({bloodGroup})}
/>
<TextField
label='Parent Name'
value={parentName}
onChangeText={(parentName)=>this.setState({parentName})}
/>
<TextField
label='Phone Number'
value={phone}
onChangeText={(phone)=>this.setState({phone})}
/>
<TextField
label='E mail'
value={email}
onChangeText={(email)=>this.setState({email})}
/>
<TextField
label='Sibling Studying in the school'
value={sibling}
onChangeText={(sibling)=>this.setState({sibling})}
/>
<TextField
label='Class'
value={siblingClass}
onChangeText={(siblingClass)=>this.setState({siblingClass})}
/>
<TextField
label='Address'
value={address}
onChangeText={(address)=>this.setState({address})}
/>
<Button
style={{backgroundColor: '#3e9cd3'}}
textStyle={{fontSize: 18}}
onPress={()=> this.handleButtonPress()}>
Save
</Button>
</View>
);
}