我正在尝试通过单击按钮来调度操作。
我已经创建了我的组件。我将它连接到由提供者传递给组件的存储。但我收到一个错误:
Uncaught TypeError: this.doSearchClick is not a function
我有我的进口:
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import action_doSearch from '../../actions/searchActions'
我的组件:
class SearchForm extends React.Component {
constructor(props, doSearchClick) {
super(props);
this.search = this.search.bind(this);
this.doSearchClick = doSearchClick;
}
search() {
this.doSearchClick('bla bla from search');
}
render() {
return(
<div>
<button onClick={this.search}>Search</button>
</div>
);
}
}
不确定是否需要:
SearchForm.propTypes = {
doSearchClick: PropTypes.func.isRequired
};
最后是连接
内容:
const mapStateToProps = (state) => {
return {
state
}
};
const mapDispatchToEvents = (dispatch) => {
return {
doSearchClick: (searchCriteria) => {
dispatch(action_doSearch(searchCriteria));
}
};
};
const SearchFormConnected = connect(
mapStateToProps,
mapDispatchToEvents
)(SearchForm);
在顶层,我通过 Provider 将商店向下传递:
import { Provider } from 'react-redux'
const finalCreateStore = compose(
applyMiddleware(
middleware,
thunk
),
DevTools.instrument()
)(createStore);
const store = finalCreateStore(reducer);
ReactDOM.render(
<Provider store={store}>
....
我还尝试通过上下文访问商店(不起作用并且可能已弃用)并使用 @connect
属性(给了我类似的错误)来实现此目的。
最佳答案
doSearchClick
将在 props 对象中传递。因此,您需要输入 props.doSearchClick
才能访问它。
关于reactjs - React-Redux 从组件调度操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35601666/