export class SearchBar extends React.Component {
render() {
return (
<div>
<input onChange={this.props.onSearchTermChange} />
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return {
onSearchTermChange: () =>
dispatch({
type: "SEARCHTERMCHANGE",
payLoad: {}
})
};
};
基本上,当输入更改时,我想调用“onSearchTermChange”操作并将输入的值传递给reducer,但我不知道如何从 onSearchTermChange 操作访问输入值。
你必须使用event.target.value
<input
onChange={ (e) => this.props.onSearchTermChange(e.target.value)}
value={this.props.value}
/>
您的动作创建者现在将是
const mapDispatchToProps = dispatch => {
return {
onSearchTermChange: (value) =>
dispatch({
type: "SEARCHTERMCHANGE",
payLoad: value
})
};
};
和你的减速机
case "SEARCHTERMCHANGE":
return {
...state,
value: action.payLoad
}
最后你需要将你的值导入到你的 props 中。
const mapStateToProps = (state) => ({
value: state.value,
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)