从另一个组件更改admin-on-rest中的输入值

Question

我正在使用admin-on-rest作为我正在构建的应用程序的管理界面.在创建表单中,有3个输入.我需要根据antoher组件生成的事件更改这3个输入的值.

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>
);};

所以我想从GeosuggestInput组件内部触发更改,该组件将更新上面的地址,lat和lng输入的redux存储.该组件是一个处理标记上的单击事件的地图.我从那个事件中得到了我需要的数据.

谢谢.

====================== 编辑.非常感谢希腊的回答.

我只需要使用connect,连接到redux商店.

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 );

连接后,您将可以访问this.props下的这些方法(在本例中是GeosuggestInputComponent内).话虽这么说,我调用事件处理程序中的方法将数据作为val参数传递,并且它起作用.

编辑.所以这将进入渲染功能

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

然后,类中的方法(我在渲染中绑定的方法)

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

因此,通过连接,您可以使用新的谓词来装饰组件的道具.

Answer 1

您需要使用如下所示的方法将 GeoSuggest 输入单独连接到 FormState

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

不要认为这可以直接由 TabbedForm 处理。您必须编写自定义表格。

这个答案可能有助于编写自定义表单。查看最后一个答案，其中我记录了如何创建自定义表单。

如何丰富 AOR 编辑页面的样式