调度一个动作 onChange 输入答案

【问题标题】：Dispatch an action onChange input调度一个动作 onChange 输入
【发布时间】：2018-11-29 10:15:45
【问题描述】：

我正在尝试对输入 onChange 发送一个操作。 searchQuery() get 被调用但不调度操作。

这是带有输入标签的组件

const SearchBar = () => 
  <Card>
    <div className={styles.searchFieldContainer}>
      <div className={styles.field}>
        <input type="text" onChange={(event)=> searchQuery(event.target.value)} placeholder="Search for items or sellers" />
      </div>
      <Button className={styles.searchButton}>
        Search
      </Button>
    </div>
  </Card>

const mapStateToProps = () => {
  return {

  }
} 

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

searchQueryRequest() 请求没有被分派。 searchQuery() 函数虽然有效。

export const SEARCH_QUERY_REQUEST = 'SEARCH_QUERY_REQUEST'
function searchQueryRequest(query) {
  console.log(query) // doesn't get called
  return { type: SEARCH_QUERY_REQUEST, query }
}

export function searchQuery(query) {
  console.log(query) // works till here
  return (dispatch, getState) => {
    dispatch(searchQueryRequest(query))
  }
}

【问题讨论】：

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

您还必须调度 searchQuery() 函数。

const SearchBar = ({ searchQuery }) => 
  <Card>
    <div className={styles.searchFieldContainer}>
      <div className={styles.field}>
        <input type="text" onChange={(event)=> searchQuery(event.target.value)} placeholder="Search for items or sellers" />
      </div>
      <Button className={styles.searchButton}>
        Search
      </Button>
    </div>
  </Card>

const mapStateToProps = () => {
  return {

  }
} 

const mapDispatchToProps = (dispatch) => {
  return {
    searchQuery: (val) => dispatch(searchQuery(val))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

【讨论】：

很高兴我能帮上忙。