6

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.

5
  • could you share your change function? Commented Dec 13, 2017 at 17:11
  • Hello. Yes, I just edited my answer. Commented Dec 14, 2017 at 8:11
  • FYI, for the change method: import { connect } from 'react-redux' Commented Feb 5, 2018 at 12:02
  • What does the change function do? - change ( 'record-form' , "lat" , val ) I'm not sure how to implement that. Commented Feb 22, 2018 at 20:21
  • I get the error: 'change' is not defined no-undef when I try this Commented Feb 22, 2018 at 20:45

1 Answer 1

3

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

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks ! I eddited my question with the solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.