如何分派值 onChange

Question

我正在构建一个搜索组件，我已经设置了我的操作和缩减器等等...但是我不知道如何在我的组件中调度事件。 onChangeValue 属性中应该包含什么？

代码如下：

import React from "react";
import { connect } from "react-redux";
import { getListOfUsers, clearDetails } from "../../actions/actions";
import SearchBar from "../../components/search/search";

const SearchBarContainer = onChangeValue => {
  return <SearchBar onChangeValue={onChangeValue} id="search" icon="search" />;
};

const mapStateToProps = state => {
  return {};
};

const mapDispatchToProps = dispatch => {
  return {
    onChangeValue: e => {
      dispatch(getListOfUsers(e.target.value));
      dispatch(clearDetails());
    }
  };
};

const connected = connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchBarContainer);

export default connected;

Answer 1

SearchBarContainer 是一个功能组件，因此它不会有 state 或 this 变量。您需要从道具中获取它们。调度函数 onChangeValue 也可用作容器的道具。

const SearchBarContainer = ({ onChangeValue, value }) => {
  return (
    <SearchBar
      onChangeValue={onChangeValue}
      value={value}
      id="search"
      icon="search"
    />
  );
};

Answer 2

改变

<SearchBar
      onChangeValue={onChangeValue}
      value={this.state.value}
      id="search"
      icon="search"
    />

到

<SearchBar
          onChangeValue={this.props.onChangeValue}
          value={this.state.value}
          id="search"
          icon="search"
        />

如何分派值 onChange

How to dispatch value onChange

dispatch

reactjs

redux