React指子組件向父組件傳值（轉載整理）

工做或者面試中常常遇到這樣的問題，「子組件如何向父組件傳值？」。其實很簡單，歸納起來就是：react中state改變了，組件纔會update。父寫好state和處理該state的函數，同時將函數名經過props屬性值的形式傳入子，子調用父的函數，同時引發state變化，子組件要寫在父組件以前。

很簡單的一個例子，咱們在輸入框中輸入溫度，輸入框下面顯示冷和熱。這裏就有兩個組件，輸入框和它下面的顯示內容，且它們共享一個狀態，就是溫度。因此咱們要把溫度這個狀態放到這兩個組件的父組件中。這裏就有三個組件，一個輸入框 TemperatureInput，一個是顯示內容 TemperatureShow，父組件 TemperatureContainer。 因爲 TemperatuerInput 和TemperatureShow 是無狀態的，能夠用函數式聲明，接受父組件傳來的 props. TempeartureContainer 是有狀態的，要用class聲明。

TemperatureShow 組件很是簡單，就是條件渲染。根據父組件傳遞過來的溫度，渲染出不一樣的內容。

//final TemperatureShow Class
class TemperatureShow extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        if(this.props.temperature >38) {
            return <p>溫度：<span style={{color:'#f50',fontSize:'18px'}}>熱</span></p>
        }else if(this.props.temperature<=38 && this.props.temperature >=0){
            return <p>溫度：<span style={{color:'#0098f4'}}>正合適</span></p>
        }else {
            return <p>溫度：<span style={{color:'#333'}}>冷</span></p>
        }
    }
}
複製代碼

TemperatureInput 則包含一個input輸入框，在react，輸入框主要經過 value 和 onChange 事件進行控制，狀態是自保持的。可是這裏咱們把狀態放到父組件 TempeartureContainer 中，輸入框是無狀態的，因此它的value值也只能從父組件中獲取，onChange 事件也只把用戶輸入的值傳遞給父組件，這裏就是父子之間相互通訊。 這裏先簡單寫一個它的表現，onChange稍後再說。

//TemperatureInput Class
class TemperatureInput extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <p> <label htmlFor="tempInput">請輸入天氣溫度：</label> {/* onChange 事件調用函數*/} <input className="Tem-input" type="text" name="tempInput" value={this.props.temperature} onChange={}/> </p> ); } } 複製代碼

還剩下 TempeartureContainer 父組件，它是一個容器，把全部的組件包起來，固然，它還要定義狀態temperature，傳遞給子組件。

//TemperatureContainer Class
class TemperatureContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            temperature: ''
        };
    }
    render() {
        let temperature = this.state.temperature;
        return (
            <div>
                <TemperatureInput temperature={temperature}/>
                <TemperatureShow  temperature={parseFloat(temperature) } />
            </div>
        )
    }
}
複製代碼

如今經過ReactDOM.render 把TempeartureContainer 渲染到頁面上。

ReactDOM.render(
        <TemperatureContainer />, document.getElementById('root') ); 複製代碼

最後咱們要處理一下input 輸入框中的輸入問題，當咱們進行輸入的時候，會觸發onChange事件，這時要改變temperature 的值，可是input自身是沒法作到的，由於temperature存在於 父組件中，只能在父組件中改變。父組件中也很容易作到，聲明一個函數，調用setState 方法，在setState中咱們把新值賦值給temperature，可是這個新值，也就是用戶輸入的值，有點問題，它存在於子組件input 中， 其實也很好解決，函數能夠進行傳參，函數經過傳參能夠得到它想要的值。因此在父組件中聲明函數，在子組件調用，子組件經過函數傳參，把得到的新值傳遞給這個函數，那麼父組件 也就得到了子組件的值，固然父組件中函數要有一個參數用於接收值。父組件中聲明的函數，子組件怎麼調用? 這更簡單了，父組件能夠經過props 傳遞給子組件。

在父組件中聲明一個函數，它要有一個參數，同時經過props 傳遞給子組件。

//final TemperatureContainer Class
class TemperatureContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            temperature: ''
        };
    }
    // 父組件中的函數,接受一個參數
    handleTemp = (temperature) => {
        this.setState({
            temperature:temperature
        })
    };
    render() {
        let temperature = this.state.temperature;
        return (
            <div>
                {/* 傳遞給子組件*/}
                <TemperatureInput temperature={temperature} onTemperateChange={this.handleTemp}/>
                <TemperatureShow  temperature={parseFloat(temperature) } />
            </div>
        )
    }
}
export default TemperatureContainer;
複製代碼

子組件調用父組個傳遞過來的參數，並進行傳值。

//final TemperatureInput Class
class TemperatureInput extends React.Component{
    constructor(props){
        super(props);
    }
    handleTemp = (e) =>{
        // 接受父組件傳遞過來的函數，調用並傳值給父組件
        this.props.onTemperateChange(e.target.value)
    };
    render(){
        return(
            <p> <label htmlFor="tempInput">請輸入天氣溫度：</label> {/* onChange 事件調用函數*/} <input className="Tem-input" type="text" name="tempInput" value={this.props.temperature} onChange={this.handleTemp}/> </p> ); } } 複製代碼

參考地址：父子組件之間的通訊