web-dev-qa-db-ja.com

React Admin-フォームで現在の値を取得します

編集フォームでレコードの「更新された」値を取得するのに大きな問題があります。正しいレコードソースにリンクされている入力があっても、それを更新する必要がありますが、常に初期レコード値を取得します。

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
8
Nicolas Kern

それは本当にそれらの値で何をしたいかによります。別の入力の値に基づいて入力を非表示/表示/変更する場合は、 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 のドキュメントでさらに多くの例を見つけることができます。 2つの入力をリンクする と 他の入力に基づいて入力を非表示にする を見てください。

ただし、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);
20
Gildas Garcia

私は実用的な解決策を見つけました：

import { connect } from 'react-redux';

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

export default connect(mapStateToProps)(MyForm);

フォームの状態をコンポーネントのプロパティにマッピングするとき、次を使用して値を見つけることができます。

recordLiveValues.surface
3
Nicolas Kern