如何将值从组件传递到 Redux 表单
How to pass values from on component to Redux form
我在 React.js 中使用 Redux 表单作为表单,我的表单是,我有一个自定义 google 地图组件,我想将纬度和经度绑定到我的表单
形式
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const SimpleForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div className="position-relative form-group">
<label>First Name</label>
<div>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
className="form-control"
/>
</div>
</div>
<Field name = 'eventLocation'
component = {MyParentComponentWrapper} />
</form>
);
};
export default reduxForm({
form: 'simple', // a unique identifier for this form
})(SimpleForm);
我的 MyParentComponentWrapper 代码是
import React from 'react';
import { compose, withProps, lifecycle } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
const MyMapComponent = compose(
withProps({
googleMapURL:
'https://maps.googleapis.com/maps/api/js?key=AIzaSyCYSleVFeEf3RR8NlBy2_PzHECzPFFdEP0&libraries=geometry,drawing,places',
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
lifecycle({
componentWillMount() {
const refs = {};
this.setState({
position: null,
onMarkerMounted: ref => {
refs.marker = ref;
},
onPositionChanged: () => {
const position = refs.marker.getPosition();
console.log(position.toString());
},
});
},
}),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
{props.isMarkerShown && (
<Marker
position={{ lat: -34.397, lng: 150.644 }}
draggable={true}
ref={props.onMarkerMounted}
onPositionChanged={props.onPositionChanged}
/>
)}
</GoogleMap>
));
class MyParentComponentWrapper extends React.PureComponent {
state = {
isMarkerShown: false,
};
render() {
return (
<div>
<MyMapComponent isMarkerShown={true} />
</div>
);
}
}
export default MyParentComponentWrapper;
当用户拖动标记时,此组件将console.log纬度和经度值
如何将 console.log
值传递给 redux-form?
任何人都可以建议这样做的方法吗?
Here 是您的应用程序使用 redux-form
的代码框。请注意,在 latLngForm.js
中设置表单后,当您的标记移动时,我在您的地图容器中使用 connect
到 dispatch
reduxForm 的 change
操作。这就是更新商店的内容。
我还将 position
作为 prop
传递给 <MyMapComponent />
以设置标记的位置。这意味着您的标记的位置始终基于表单的值,并且手动移动地图的标记会更改表单的值。这将允许您通过字段或通过拖放标记手动设置位置。
<MyMapComponent />
中的 mapStateToProps
是这里的重要部分。 redux-form
自动为我们存储状态中的值,这是我们检索它的地方。
注意文件顶部的这些行:
import { change, formValueSelector } from "redux-form";
...
const formSelector = formValueSelector("form");
这将设置我们的表单选择器。 "form"
是表单的标识符。现在,要从我们的状态中检索这些值,我们这样做:
const mapStateToProps = (state) => ({
position: {
lat: formSelector(state, 'lat'),
lng: formSelector(state, 'lng') // The key here is the name you passed into the field.
}
});
然后我们使用connect
将组件实际连接到商店:
connect(mapStateToProps)(MyMapComponent);
Redux 发挥了它的魔力,现在我们的字段可以通过组件中的 this.props.position
获得!
Here 是我的工作解决方案,从您的沙箱中分叉出来。
我刚刚在您的 MyParentComponentWrapper
组件中添加了一个回调,每次标记位置发生变化时都会触发该回调。在您的表单中,您收听回调并使用从 MyParentComponentWrapper
收到的值设置 position
字段。
我喜欢让组件尽可能简单,而不是通过 connect
将它们与 redux state 连接起来。只需将您的 MyParentComponentWrapper
视为一个输入字段,每次它的值发生变化时只会触发 change
事件,而不会意识到 how/where 这个值将被使用。
在这种情况下 MyParentComponentWrapper
只显示一个标记并在每次标记位置发生变化时调用回调。负责以适当方式处理此位置的是表单组件。
以下是我如何使用回调更改您的表单呈现:
<MyParentComponentWrapper setPosition={onPositionSet} />
这是表单组件中的回调:
const onPositionSet = (position) => {
props.change("position", position);
}
其中 change
函数已添加到您的组件道具中,因为您将其包装在 redux-form
中
我在 React.js 中使用 Redux 表单作为表单,我的表单是,我有一个自定义 google 地图组件,我想将纬度和经度绑定到我的表单
形式
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const SimpleForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div className="position-relative form-group">
<label>First Name</label>
<div>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
className="form-control"
/>
</div>
</div>
<Field name = 'eventLocation'
component = {MyParentComponentWrapper} />
</form>
);
};
export default reduxForm({
form: 'simple', // a unique identifier for this form
})(SimpleForm);
我的 MyParentComponentWrapper 代码是
import React from 'react';
import { compose, withProps, lifecycle } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
const MyMapComponent = compose(
withProps({
googleMapURL:
'https://maps.googleapis.com/maps/api/js?key=AIzaSyCYSleVFeEf3RR8NlBy2_PzHECzPFFdEP0&libraries=geometry,drawing,places',
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
lifecycle({
componentWillMount() {
const refs = {};
this.setState({
position: null,
onMarkerMounted: ref => {
refs.marker = ref;
},
onPositionChanged: () => {
const position = refs.marker.getPosition();
console.log(position.toString());
},
});
},
}),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
{props.isMarkerShown && (
<Marker
position={{ lat: -34.397, lng: 150.644 }}
draggable={true}
ref={props.onMarkerMounted}
onPositionChanged={props.onPositionChanged}
/>
)}
</GoogleMap>
));
class MyParentComponentWrapper extends React.PureComponent {
state = {
isMarkerShown: false,
};
render() {
return (
<div>
<MyMapComponent isMarkerShown={true} />
</div>
);
}
}
export default MyParentComponentWrapper;
当用户拖动标记时,此组件将console.log纬度和经度值
如何将 console.log
值传递给 redux-form?
任何人都可以建议这样做的方法吗?
Here 是您的应用程序使用 redux-form
的代码框。请注意,在 latLngForm.js
中设置表单后,当您的标记移动时,我在您的地图容器中使用 connect
到 dispatch
reduxForm 的 change
操作。这就是更新商店的内容。
我还将 position
作为 prop
传递给 <MyMapComponent />
以设置标记的位置。这意味着您的标记的位置始终基于表单的值,并且手动移动地图的标记会更改表单的值。这将允许您通过字段或通过拖放标记手动设置位置。
<MyMapComponent />
中的 mapStateToProps
是这里的重要部分。 redux-form
自动为我们存储状态中的值,这是我们检索它的地方。
注意文件顶部的这些行:
import { change, formValueSelector } from "redux-form";
...
const formSelector = formValueSelector("form");
这将设置我们的表单选择器。 "form"
是表单的标识符。现在,要从我们的状态中检索这些值,我们这样做:
const mapStateToProps = (state) => ({
position: {
lat: formSelector(state, 'lat'),
lng: formSelector(state, 'lng') // The key here is the name you passed into the field.
}
});
然后我们使用connect
将组件实际连接到商店:
connect(mapStateToProps)(MyMapComponent);
Redux 发挥了它的魔力,现在我们的字段可以通过组件中的 this.props.position
获得!
Here 是我的工作解决方案,从您的沙箱中分叉出来。
我刚刚在您的 MyParentComponentWrapper
组件中添加了一个回调,每次标记位置发生变化时都会触发该回调。在您的表单中,您收听回调并使用从 MyParentComponentWrapper
收到的值设置 position
字段。
我喜欢让组件尽可能简单,而不是通过 connect
将它们与 redux state 连接起来。只需将您的 MyParentComponentWrapper
视为一个输入字段,每次它的值发生变化时只会触发 change
事件,而不会意识到 how/where 这个值将被使用。
在这种情况下 MyParentComponentWrapper
只显示一个标记并在每次标记位置发生变化时调用回调。负责以适当方式处理此位置的是表单组件。
以下是我如何使用回调更改您的表单呈现:
<MyParentComponentWrapper setPosition={onPositionSet} />
这是表单组件中的回调:
const onPositionSet = (position) => {
props.change("position", position);
}
其中 change
函数已添加到您的组件道具中,因为您将其包装在 redux-form