React Admin - 获取表单中的当前值
React Admin - Get current value in a form
我在获取编辑表单中记录的 "updated" 值时遇到了很大的麻烦。我总是得到初始记录值,即使我有一个链接到正确记录源的输入,应该更新它。
是否有其他方法来获取 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 表单的情况下,我无法让它工作。
谢谢,
尼古拉斯
我找到了可行的解决方案:
import { connect } from 'react-redux';
const mapStateToProps = state => ({
recordLiveValues: state.form['record-form'].values
});
export default connect(mapStateToProps)(MyForm);
将表单状态映射到我的组件的属性时,我可以使用以下方法找到我的值:
recordLiveValues.surface
这真的取决于你想用这些值做什么。如果你想 hide/show/modify 输入基于另一个输入的值,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 documentation. Take a look at the Linking Two Inputs and 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);
我在获取编辑表单中记录的 "updated" 值时遇到了很大的麻烦。我总是得到初始记录值,即使我有一个链接到正确记录源的输入,应该更新它。
是否有其他方法来获取 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 表单的情况下,我无法让它工作。
谢谢,
尼古拉斯
我找到了可行的解决方案:
import { connect } from 'react-redux';
const mapStateToProps = state => ({
recordLiveValues: state.form['record-form'].values
});
export default connect(mapStateToProps)(MyForm);
将表单状态映射到我的组件的属性时,我可以使用以下方法找到我的值:
recordLiveValues.surface
这真的取决于你想用这些值做什么。如果你想 hide/show/modify 输入基于另一个输入的值,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 documentation. Take a look at the Linking Two Inputs and 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);