Question

我很难在编辑表单中获取记录的“更新”值。即使我有一个链接到正确的记录源的输入，我也会始终获取初始记录值。

是否有另一种方法来获取SimpleForm的值？

我有一个简单的编辑表单：

<Edit {...props}>
    <SimpleForm>
        <MyEditForm {...props} />
    </SimpleForm>
</Edit>

MyEditForm如下：

class MyEditForm extends React.Component {
    componentDidUpdate(prevProps, prevState, snapshot) {    
        console.log(prevProps.record.surface, this.props.record.surface); // <-- here is my problem, both values always get the initial value I had when I fetched the resource from API
    }

    render() {
        return (
            <div>
                <TextInput source="surface" />
                <!-- other fields -->
            </div>
         );
    }
}

我通常以这种方式从其他组件中获取更新后的组件数据，但就React-admin表单而言，我无法使其正常工作。

谢谢

尼古拉斯

Answer 1

这实际上取决于您要使用这些值做什么。如果要基于其他输入的值隐藏/显示/修改输入，则首选FormDataConsumer：

例如：

import { FormDataConsumer } from 'react-admin';

const OrderEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <SelectInput source="country" choices={countries} />
            <FormDataConsumer>
                {({ formData, ...rest }) =>
                     <SelectInput 
                         source="city"
                         choices={getCitiesFor(formData.country)}
                         {...rest}
                     />
                }
            </FormDataConsumer>
        </SimpleForm>
    </Edit>
);

您可以在Input文档中找到更多示例。看看Linking Two Inputs和Hiding Inputs Based On Other Inputs。

但是，如果要在MyEditForm组件的方法中使用表单值，则应使用reduxForm selectors。这样比较安全，因为即使我们在商店中更改reduxForm状态的键也可以使用。

import { connect } from 'react-redux';
import { getFormValues } from 'redux-form';

const mapStateToProps = state => ({
    recordLiveValues: getFormValues('record-form')(state)
});

export default connect(mapStateToProps)(MyForm);

Answer 2

我找到了可行的解决方案：

import { connect } from 'react-redux';

const mapStateToProps = state => ({
    recordLiveValues: state.form['record-form'].values
});

export default connect(mapStateToProps)(MyForm);

将表单状态映射到组件的属性时，我可以使用以下方法找到值：

recordLiveValues.surface

React Admin-以表格形式获取当前值

2 个答案: