在更改输入时发送一个动作

Question

我正尝试在输入 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))
  }
}

Answer 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);

在更改输入时发送一个动作

Dispatch an action onChange input

reactjs

redux

redux-thunk

react-redux