Question

我正在构建一个搜索组件，并且已经设置了动作和reducer等等……但是我不知道如何在我的组件中调度事件。 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上分配值

2 个答案: