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

Question

我正在使用 admin-on-rest 作为我正在构建的应用程序的管理界面。在创建表单中，有 3 个输入。我需要根据另一个组件生成的事件更改这 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 组件内部触发一个更改，该更改将更新上述地址、纬度和经度输入的 redux 存储。该组件是一个处理标记上的单击事件的 map 。我从该事件中获取了所需的数据。

谢谢。

======================编辑。非常感谢 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"/>

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

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

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

How to richly style AOR Edit page