Change input value in admin-on-rest from another component

Question

I am using admin-on-rest as the admin interface for an app I'm building. In a create form, there are 3 inputs. I need to change the values of these 3 inputs based on events generated from antoher component.

export const OfficialPetitionCreate = ( props ) => {

return (
    <div>
        <Create {...props}>
            <TabbedForm>
                <FormTab label="General">
                    ...
                    <TextInput options={{ fullWidth : true }} label="Address" source="address"/>
                    <NumberInput options={{ fullWidth : true }} label="Lat" source="lat"/>
                    <NumberInput options={{ fullWidth : true }} label="Lng" source="lng"/>

                    <GeosuggestInput />

                </FormTab>

            </TabbedForm>
        </Create>
    </div>
);};

So I want to trigger a change from inside the GeosuggestInput component that would update the redux store for the address, lat and lng inputs above. The component is a map that handles a click event on a marker. I get the data I need from that event.

Thanks.

====================== Edit. Many thanks to pareek for his answer.

I just had to use connect, to connect to the redux store.

export default connect ( null , {
    changeLat            : val => change ( 'record-form' , "lat" , val ) ,
    changeLng            : val => change ( 'record-form' , "lng" , val ) ,
    changeAddress        : val => change ( 'record-form' , "address" , val ) ,
    changeMapLocationUrl : val => change ( 'record-form' , "mapLocationUrl" , val ) ,
} ) ( GeosuggestInputComponent );

After you connect, you will have access to these methods under this.props (in this case inside the GeosuggestInputComponent). That being said, I invoked the methods in event handlers passing the data as the val parameter, and it worked.

Edit. So this would go in the render function

<MapWithASearchBox changeAddress={this.changeAddress.bind ( this )}
                                   id="map-input"/>

And then, the method in the class (the one I am binding to in render)

changeAddress ( val ) {
   // # more logic here maybe ?
    this.props.changeAddress ( val );
}

So bassically with connect you decorate the props of the component with new predicates.

Stamford

could you share your change function? – Gesture

Hello. Yes, I just edited my answer. – Stamford

FYI, for the change method: import { connect } from 'react-redux' – Alate

What does the change function do? - change ( 'record-form' , "lat" , val ) I'm not sure how to implement that. – Sourwood

I get the error: 'change' is not defined no-undef when I try this – Sourwood

Answer 1

You need to connect the GeoSuggest input separately to the FormState using something like below

https://redux-form.com/7.1.2/docs/api/formvalueselector.md/

Don't think this can be handled by TabbedForm directly. You will have to write a custom form.

This answer might help in writing a custom form. Look at the last answer where I have documented how I created a custom form.

How to richly style AOR Edit page

Streptomycin

Thanks ! I eddited my question with the solution. – Stamford