如何将输入框值传递给react-redux中的操作

时间:2017-07-19 19:39:16

标签: reactjs react-redux

抱歉在这里结合了两个问题。我正在编写简单的搜索/过滤应用程序。之前只有我的组件存在,所以我能够轻松输入文本值。但是现在我开始写我的容器部分,所以我很困惑,我应该如何将用户值传递给动作?我的第二个问题是如何将获取的结果写回我的页面

这是我的SearchContainer

import Search from "../components/Search"
import React from "react"
import {connect} from "react-redux"
import {search} from "../action/SearchAction"
import {bindActionCreators} from 'redux';
const SearchContainer = ({search}) =>(
    <Search nameSearch={(value) => search(value)}/>
)
const mapDispatchToProps= (dispatch) => (
 bindActionCreators({search},dispatch)
)
const mapStateToProps= state => {
    console.log("state",state)
    return{
    results:state.searchResult.values
    }
}

export default connect(
     mapStateToProps,
    mapDispatchToProps

) (SearchContainer)

这是我的搜索页面

import React from "react"
import Select from "react-select"
import {connect} from "react-redux"


const Search = ({nameSearch}) => {
   // const {search,value} = this.props

    return (
    <div>
        <input name="search"  id="searchbutton" onKeyUp= {nameSearch}></input>
     </div>
    )
}



export default Search

1 个答案:

答案 0 :(得分:6)

我从here得到了答案,所以我改变了我的search.js,就像这样

MenuID    MenuName           MenuColor
---------------------------------------
10         Daily Tickets     Gray
15         Kids Ticket       Dark Pink
20         Group Discount    Dark Ash
11         Discount ticket   Brown
17         Referral Ticket   Beige
22         Frequent visitor  Musturd
27         Annual Pass       sky blue
25         Kids Pass         Pink
24         free Ticket       Yellow