我在编辑表单中获取记录的“更新”值时遇到了很大的麻烦。我总是得到初始记录值,即使我有一个链接到正确记录源的输入,它应该更新它。
有没有另一种方法来获取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>
);
}
}
我通常这样做是为了从其他组件获取更新组件的数据,但在反应管理表单的情况下,我无法让它工作。
谢谢,
萨科
这实际上取决于你想用这些值做什么。如果要根据另一个输入的值隐藏/显示/修改输入,则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);
我找到了一个有效的解决方
import { connect } from 'react-redux';
const mapStateToProps = state => ({
recordLiveValues: state.form['record-form'].values
});
export default connect(mapStateToProps)(MyForm);
将表单状态映射到组件的属性时,我可以使用以下命令查找我的值:
recordLiveValues.surface