通过react-redux操作负载传递输入值?

2024-01-21

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(使用前将#替换为@)

通过react-redux操作负载传递输入值? 的相关文章

随机推荐