reactjs - 如果我使用 mapStateToProps,输入属性不会改变
问题描述
我是 Reactjs 的新手。我有角度背景。我面临手动更改字段纬度的问题。我尝试将 onChange 与 handleChange- 一起使用,但它不起作用我做错了什么?
代码
class Form extends React.Component {
constructor(props){
super(props);
}
handleChange(value) {
let coords= {...this.state.coords}
coords.latitude = value;
this.setState({coords})
}
render() {
return (<div>
<label htmlFor ="latitude">Широта</label>
<input id='latitude' type='text'
onChange={(event) => this.handleChange(event.target.value)} value={this.props.coords.latitude} />
<label htmlFor ="longitude">Долгота</label>
<input id='longitude' onChange={(type) => {
this.setState({type});
}} type='text' value={this.props.coords.longitude} />
<input onClick={this.handleClick} type='submit' value='Посмотреть на карте'/>
</div>
);
}
}
function mapStateToProps(state) {
return {
coords: state.coords
}
}
export default connect(mapStateToProps)(Form);
解决方案
您正在将mapStateToProps
连接器提供的道具与组件的内部混合state
。
如果您想要更改商店中的纬度,则需要dispatch
一个进行更改的事件,然后组件将自动更改其值。
你也需要实施mapDispatchToProps
。
请参阅官方指南,其中提到了如何正确实施这一点。
推荐阅读
- reactjs - MobX 和 Firebase,TypeError:WEBPACK_IMPORTED_MODULE_0__firebase.b.ref 不是函数
- javascript - babel loader 仅在文件上工作
- php - 在未找到 Laravel 类中使用 aws-sdk-php
- python - 我的 IDE 和 PythonTutor.com 之间的准确性?
- mysql - 如何通过codeigniter中的同一列获取多行
- c# - 获取每月的星期六
- r - 每次更改时更改计数,但在 R 中遇到 0 时重置
- reactjs - ReactJS - componentWillReceiveProps 使用
- angular - 在 ngx-datatable angular 4 中使用 *ngIf 隐藏/显示列时,不维护表列的拖放顺序
- excel - 基于 MAX 值使用 Powershell 在 Excel WB 中查找 ROW 值