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

谢谢。

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

我只需要使用 connect，连接到 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 );

连接后，您将可以访问 this.props 下的这些方法（在本例中是在 GeosuggestInputComponent 中）。也就是说，我调用了事件处理程序中的方法，将数据作为 val 参数传递，它起作用了。

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

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

然后，class 中的方法（我在渲染中绑定的方法）

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

基本上，使用 connect 可以用新谓词装饰组件的 props。

Answer 1

您需要使用如下方式将 GeoSuggest 输入单独连接到 FormState

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

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

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

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

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

reactjs

redux

field

admin-on-rest