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> ); } } 复制代码

参考地址：父子组件之间的通讯