React Admin - 获取表单中的当前值答案

【问题标题】：React Admin - Get current value in a formReact Admin - 获取表单中的当前值
【发布时间】：2019-01-06 18:24:06
【问题描述】：

我在获取编辑表单中记录的“更新”值时遇到了很大的麻烦。我总是得到初始记录值，即使我有一个链接到正确记录源的输入，应该更新它。

是否有其他方法可以获取 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 表单的情况下，我无法让它工作。

谢谢，

尼古拉斯

【问题讨论】：

标签： react-admin

【解决方案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。这更安全，因为即使我们更改了我们 store 中 reduxForm 状态所在的键，它也可以工作。

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

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

export default connect(mapStateToProps)(MyForm);

【讨论】：

完美答案，谢谢。这确实是我目前面临的第二个案例。您是否知道如何以编程方式更改函数中的值？
使用 redux 表单动作创建者
感谢您的信息，尽管我在理解如何将 mapDispatchToProps（遵循此文档 github.com/reduxjs/react-redux/blob/master/docs/…）适应 React Admin 时遇到了很大的麻烦。如果您有一个非常简短的示例，那将是完美的。非常感谢；）
这个已经过时了，react-admin 不使用 redux-form，它使用 react-final-form。我正在尝试使用FormDataConsumer 显示两次DateField，除了将日期时间格式化为特定时区并且是disabled。我总是从以前的表单中得到formData.someDate，我需要选择两次值来更新这个字段。如何在每次值更改时访问表单中的值以便正确格式化我的字段？

【解决方案2】：

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

import { connect } from 'react-redux';

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

export default connect(mapStateToProps)(MyForm);

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

recordLiveValues.surface

【讨论】：