2017-03-16 99 views
0

我正在努力使React-redux應用程序通過狀態從一個組件傳遞一個值到另一個組件。我不希望使用reducer和/或dispatch,因爲我沒有調用webservice,我只是想從文本框中獲取一個值來啓用對訂單組件的另一個控件。React-redux添加一個新變量到狀態

首先,我可以從控件獲取值,但是當調用mapstatetoprops時,我設置的並希望添加到狀態的變量未定義。這也可以解釋爲什麼我的其他問題。在我的其他組件使用道具的功能不會被調用,因爲國有componentWillReceiveProps

下面是相關的代碼片段:

<ListItemContent> 
    <Control component={Textfield} model="somemodel" label="MyLabel" onBlur={this.onChangeOfValue}/> 
</ListItemContent> 

onChangeOfValue = (event) => { 
    this.setState({ 
     newValueToPassAlong: event.target.value 
    }); //newValueToPassAlong is set in constructor 
}; 

let mapStateToProps = (state) => { 
    return { 
     newValueToGive: state.newValueToPassAlong 
    } // This is undefined 
}; 

export default connect(mapStateToProps)(form) 

所以,我的問題是,如何做一個新的變量添加到狀態使用React-redux而不需要reducer等,並且可以在我的其他組件中訪問這個變量?

+0

將動作創建器/縮減器與非聯網動作一起使用會出現什麼問題?也就是說,閱讀這個可能的解決方案。 https://facebook.github.io/react/docs/lifting-state-up.html –

+0

當我需要知道是否在文本框中輸入了一個值以及我已繼承的代碼時,需要做很多事情正在使用傳奇,它似乎有一個錯誤 – Andy5

+0

如果你使用REDX,動作和減速器是你的交易工具。 –

回答

0

setState()不會立即改變this.state,但會創建暫掛狀態轉換。調用此方法後訪問this.state可能會返回現有值。

Refer documentation for more about setState()

+0

即使他使用回調方法,他也試圖從使用全局狀態存儲的'mapStateToProps'中訪問組件本地狀態。 –

1

好行動的創建者的喜好不談,如果你想共享共同的父兩個組件之間進行同步的東西,你必須把這種狀態到母。

class ParentComponent { 
    onItemChanged = (newData) => { 
     this.setState({ thing: newData }); 
    } 

    render() { 
     return (
      <div> 
       <ChildA onItemChanged={ this.onItemChanged } /> 
       <ChildB thing={ this.state.thing } /> 
      </div> 
     ); 
    } 
} 
當您更改 ChildA

,使用this.props.onItemChanged新值。在ChildB中,該值將在this.props.thing中同步。 React將處​​理所有Component/prop更新。

所有人都說,我真的認爲使用動作創建器/減速器沒有任何問題。