我试图将一个函数传递给 React 中的子组件。如果我将该函数放在 ES6 类中,我就可以访问this.props.dispatch
,但无权访问mapStateToProps
相反,当我在 ES6 类之外定义函数时,我似乎可以访问该函数,但不能this.props.dispatch
有人可以找出我做错了什么才能同时访问this.props.dispatch
以及具有可用的功能mapStateToProps
功能
import React, { Component } from 'react';
import { connect } from 'react-redux';
import DenomInput from '../denomInput/DenomInput.js';
import * as actions from '../../actions/countActions';
class CountableItems extends Component {
constructor(props) {
super(props);
this.onDenomChange = this.onDenomChange.bind(this);
}
onDenomChange = (value, denom) => {
this.props.dispatch(actions.increaseSum(value, denom));
console.log(value);
}
render() {
const props = this.props;
let denomGroups = props.denoms.map(function (denom, i) {
return (
Object.keys(denom).map(function (key) {
let denoms = denom[key].map(function (item, i) {
return <DenomInput denom={item} onDenomChange={props.onDenomChange} key={i}></DenomInput>
});
return (<div className="col"><h2>{key}</h2>{denoms}</div>)
})
);
});
return (
<div className="countable-item-wrapper">
<div className="row">
{denomGroups}
</div>
</div>
);
}
}
function mapStateToProps(state, ownProps) {
return {
denoms: state.count.denomGroups,
onDenomChange: this.onDenomChange
}
}
export default connect(mapStateToProps)(CountableItems);
这是渲染的组件<CountableItems>
import React, { Component } from 'react';
import CountableItems from '../components/countableItems/CountableItems.js';
import CountSummary from '../components/countSummary/CountSummary.js';
import "./Count.css";
class Count extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-8">
<CountableItems />
</div>
<div className="col-4">
<CountSummary />
</div>
</div>
</div>
);
}
}
导出默认计数;
您想要传递对CountableItems
实例的onDenomChange
财产。您可以通过引用来做到这一点this.onDenomChange
like onDenomChange={this.onDenomChange}
.
重要提示:您需要使用箭头函数() => {}
为了为了this
来参考CountableItems
嵌套循环内的实例。常规函数如function () {}
不会使用正确的上下文。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import DenomInput from '../denomInput/DenomInput.js';
import * as actions from '../../actions/countActions';
class CountableItems extends Component {
onDenomChange = (value, denom) => {
this.props.dispatch(actions.increaseSum(value, denom));
console.log(value);
}
render() {
let denomGroups = this.props.denoms.map((denom, i) => {
return (
Object.keys(denom).map((key) => {
let denoms = denom[key].map((item, i) => {
return <DenomInput denom={item} onDenomChange={this.onDenomChange} key={i}></DenomInput>
});
return (<div className="col"><h2>{key}</h2>{denoms}</div>)
})
);
});
return (
<div className="countable-item-wrapper">
<div className="row">
{denomGroups}
</div>
</div>
);
}
}
function mapStateToProps(state, ownProps) {
return {
denoms: state.count.denomGroups,
}
}
export default connect(mapStateToProps)(CountableItems);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)