gpt4 book ai didi

reactjs - 如何设置和获取 redux-form 字段的值

转载 作者:行者123 更新时间:2023-12-04 17:38:40 24 4
gpt4 key购买 nike

我想改变 redux-form <Field /> 的值 。我正在构建一个 react 管理应用程序。我检查了其他问题和答案,但无法解决我的问题。

export class MapInput extends React.Component {
constructor(props) {
super(props);
}

handleChange(value) {
// Here, I want to change the value of the fields (latitude and longitude)
}

render() {
var { value } = this.state;
return (
<div style={{marginTop: 15}}>
<TitleText text="Address" />
<MapView
draggable={true}
zoom={DefaultZoom}
position={/* Also here, I need to get values from the fields as {lat: .., lng: ...} */}
onChange={this.handleChange.bind(this)} />

<Field
component={renderTextField}
name="latitude" type="number"
value={value.lat}
{...rest} />
<Field
component={renderTextField}
name="longitude"
type="number"
value={value.lng}
{...rest} />
</div>
);
}
}

最佳答案

可以引用这个"Selecting Form Values Example"

如果您想访问表单值,您的代码可能应该如下所示:

import { Field, reduxForm, formValueSelector } from 'redux-form'
import { compose } from 'redux'
import { connect } from 'react-redux'

class MapInput extends React.Component {
constructor(props) {
super(props)
}

handleChange = () => {
// latitude and longitude are now in props
console.log(this.props.latitude)
console.log(this.props.longitude)
}

render() {
const { value } = this.state
const { latitude, longitude } = this.props
return (
<div style={{ marginTop: 15 }}>
<TitleText text="Address" />
<MapView
draggable={true}
zoom={DefaultZoom}
position={{
lat: latitude,
lng: longitude
}}
onChange={this.handleChange}
/>

<Field
component={renderTextField}
name="latitude"
type="number"
value={value.lat}
{...rest}
/>
<span>
&nbsp;<code>x</code>&nbsp;
</span>
<Field
component={renderTextField}
name="longitude"
type="number"
value={value.lng}
{...rest}
/>
</div>
)
}
}

const selector = formValueSelector('formName')

export default compose(
connect(state => {
const { latitude, longitude } = selector(state, 'latitude', 'longitude')
return {
latitude,
longitude
}
}),
reduxForm({ form: 'formName' })
)(MapInput)

关于reactjs - 如何设置和获取 redux-form 字段的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55553010/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com