reactjs - 无法让 redux-form formValueSelector 正常工作
问题描述
我很难让formValueSelector从redux-form
(v8.3) 工作。我已经尝试了所有可以在```mapStateToProps` 内外使用选择器找到的变体。
在此组件中,我获取字段“半径”(数字)的值并重新使用它来调整地图上的传单圆圈的大小。
import React, { Fragment, useRef } from "react";
import L from "leaflet";
import { connect, useDispatch } from "react-redux";
import { change } from "redux-form";
import { useLeaflet } from "react-leaflet";
import AdjustIcon from '@material-ui/icons/Adjust';
import MapButton from "./MapButton";
import { Grid, Typography, Popover, Button } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import { RenderTextField, } from 'components/form/FormFields'
import { Field } from 'redux-form'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'
import { reduxForm, formValueSelector } from 'redux-form'
import { networkStatus } from 'actions/onlineStatus'
import { handleFormAdd } from 'actions/formActions'
import { withSnackbar } from 'notistack'
const useStyles = makeStyles(theme => ({
legend: {
padding: theme.spacing(1, 0.5),
borderRadius: '4px',
boxShadow: '0 1px 5px rgba(0, 0, 0, 0.65)'
},
list: {
padding: theme.spacing(1)
},
row: {
verticalAlign: 'middle',
margin: theme.spacing(0, 0, 0.5, 0),
height: '24px',
fontSize: '13px'
}
}))
const formName = 'geopoints'
function Circle(props) {
const {
handleSubmit,
radius,
pristine,
reset,
submitting
} = props
console.log(radius)
const onSubmit = formProps => {
const data = Object.assign(
{
author: props._userUID,
authorName: props._authorName,
createdAt: new Date().getTime()
},
formProps
)
props
.networkStatus()
.then(() => {
props.handleFormAdd(
{
formName: formName,
formData: data
},
'ONLINE'
)
})
.catch(() => {
props.handleFormAdd(
{
formName: formName,
formData: data
},
'OFFLINE'
)
})
}
const classes = useStyles()
const { map } = useLeaflet();
const [anchorEl, setAnchorEl] = React.useState(null)
const dispatch = useDispatch();
const layerRef = useRef(L.featureGroup());
const handleClick = event => {
layerRef.current.clearLayers()
setAnchorEl(event.currentTarget)
dispatch(change(formName, "latitude", map.getCenter().lat));
dispatch(change(formName, "longitude", map.getCenter().lng));
L.circle(
[map.getCenter().lat, map.getCenter().lng],
radius, // this is where I am trying to use the value for 'radius'
{
weight: 1,
color: "blue",
fillColor: "blue",
fillOpacity: 0.2
}).addTo(layerRef.current);
layerRef.current.addTo(map);
}
const handleClose = () => {
layerRef.current.clearLayers()
reset()
setAnchorEl(null)
}
const open = Boolean(anchorEl)
return (
<Fragment>
<MapButton
title={'Add an area circle'}
onClick={handleClick}
right
bottom={148}
>
<AdjustIcon
fontSize="small"
/>
</MapButton>
<Popover
className={classes.legend}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
>
<Grid
className={classes.list}
container
direction="column"
justify="flex-start"
alignItems="center"
>
<Grid item>
<Typography variant="body2" align="center" gutterBottom>
Add Area Marker
</Typography>
</Grid>
<form onSubmit={handleSubmit(onSubmit)}>
<Field
name="radius"
label="Radius"
type="number"
component={RenderTextField}
/>
Radius: {radius} // trying to render the value here
<Field
name="description"
label="Description"
type="text"
component={RenderTextField}
/>
<Button variant="container" type="submit" disabled={pristine || submitting}>Save</Button>
<Button type="button" disabled={pristine || submitting} onClick={handleClose}>Cancel</Button>
</form>
</Grid>
</Popover>
</Fragment>
);
}
const selector = formValueSelector(formName)
const mapStateToProps = ({
firebase: { auth },
network: { status },
state
}) => ({
_userUID: auth.uid,
_authorName: auth.displayName,
_status: status,
radius: selector(state, 'radius')
})
export default compose(
connect(
mapStateToProps,
{ networkStatus, handleFormAdd }
),
reduxForm({
form: formName,
destroyOnUnmount: true,
forceUnregisterOnUnmount: true,
enableReinitialize: true
}),
firestoreConnect()
)(withSnackbar(Circle))
提前感谢您的任何建议或解决方案
解决方案
推荐阅读
- python - 如何根据列中字符串的长度有条件地从 PySpark Dataframe StringType() 列中删除字符的子字符串?
- java - 需要转换列表
到一个元素 - java - 如何在xml中搜索元素?
- python - 如何在python中抓取多个元数据?
- javascript - 在 Bootstrap 中,为什么我的禁用按钮没有工具提示?
- c - fread 和 fgets 规格的区别?
- tcplistener - 使用任务取消令牌停止 TCP 侦听器
- ios - ld:找不到架构 armv7 的框架
- python - 使用 lxml 和请求抓取 html 时包含带有和标签的文本?
- .htaccess - htaccess 重写文件夹,添加斜杠并删除 .html