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存储。该组件是一个处理标记上的单击事件的地图。我从那个事件中得到了我需要的数据。

感谢。

====================== 的 编辑。非常感谢pareek的回答。

我只需使用 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处理。您必须编写自定义表单。

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

How to richly style AOR Edit page

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

1 个答案: