Question

React工具箱似乎要求我使用state作为其输入值http://react-toolbox.com/#/components/input。如何将我的redux道具映射到州以便与<Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />一起使用？

let SEARCH_BAR_SEARCH_FIELD_KEY = "searchField"
let SEARCH_BAR_PLACEHOLDER_TEXT_KEY = "_placeholderLabel.textColor"

func customiseSearchBar() {

    searchBar.isTranslucent = true
    searchBar.backgroundImage =  UIImage.imageWithColor(color: UIColor.yellow, size: CGSize(width: searchBar.frame.width,height: searchBar.frame.height))

    //modify textfield font and color attributes
    let textFieldSearchBar = searchBar.value(forKey: SEARCH_BAR_SEARCH_FIELD_KEY) as? UITextField
    textFieldSearchBar?.backgroundColor = UIColor.yellow
    textFieldSearchBar?.font = UIFont(name: "Helvetica Neue" as String, size: 18)
    textFieldSearchBar?.setValue(UIColor.yellow, forKeyPath: SEARCH_BAR_PLACEHOLDER_TEXT_KEY)
}

extension UIImage {

    class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
}

我认为如果我在redux状态改变时在构造函数中设置它，它将不会更新我的状态？

Answer 1

您需要将redux状态映射到组件道具。

const mapStateToProps = state => ({
  inputBoxValue: state.myReduer.inputBoxValue,
});

然后我们可以使用

 export default connect(mapStateToProps)(myComponent);

我们可以在常规道具中使用它。

<Input type='text' 
            label='Name' 
            name='name' 
            value={this.props.name} 
            onChange={this.handleChange.bind(this, 'name')} />

Redux doc：https://github.com/reactjs/react-redux/blob/master/docs/api.md

请告诉我如果我遗失了什么？

将props映射到状态以反应工具箱输入

1 个答案: