关于对react.js中状态提升的理解

demo要求：
　　在上面的input框内输入大写单词，下面的input框内会自动展示出相应的小写单词，
同理在下面的input框内输入小写单词，上面的input框内展示出相应的大写单词。

图片展示：

upperToLower.png
lowerToUpper.png

代码展示：

import React from "react";
import ReactDOM from "react-dom";

const words={
    upperCase:"upper",
    lowerCase:"lower"
}

//将输入的单词转化位大写
function toUpper(input){
    return input.toUpperCase();
}
//将输入的单词转化为小写
function toLower(input){
    return input.toLowerCase();
}

// 定义子组件WordsInput
class WordsInput extends React.Component {
    constructor(props){
        super(props);
        this.handleWordsInput=this.handleWordsInput.bind(this);
    }
    handleWordsInput(e){
        this.props.onInputChange(e.target.value)  //利用props属性调用父组件传过来的方法
    }
    render(){
        const type=this.props.type;
        const value=this.props.value;
        return (
            <form action="#">
                <legend>请输入{words[type]==="upper"?"大写":"小写"}字母</legend>
                <input
                    value={value}
                    onChange={this.handleWordsInput}
                />
            </form>
        )
    }
}
// 定义父组件InputChange
class InputChange extends React.Component {
    constructor(props){
        super(props);
        this.handleUpperCase=this.handleUpperCase.bind(this);
        this.handleLowerCase=this.handleLowerCase.bind(this);
        this.state={
            type:"upper",
            text:""
        }
    }
    handleUpperCase(value){
        const text=toUpper(value)
        this.setState({
            type:"upper",
            text  //es6语法:键与值相同时可省略值
        })
    }
    handleLowerCase(value){
        const text=toLower(value);
        this.setState({
            type:"lower",
            text  //es6语法:键与值相同时可省略值
        })
    }
    render(){
        const value=this.state.text;
        const type=this.state.type;
        const upperCase= type==="lower"?toUpper(value):value;  //保证upperCase变量永远存储大写单词
        const lowerCase= type==="upper"?toLower(value):value;  //保证lowerCase变量永远存储小写单词
        return (
            <div>
                <WordsInput
                    type="upperCase"
                    value={upperCase}   //保证该input框内永远展示出大写单词
                    onInputChange={this.handleLowerCase}
                />
                <WordsInput
                    type="lowerCase"
                    value={lowerCase}  //保证该input框内永远展示小写单词
                    onInputChange={this.handleUpperCase}
                />
            </div>
        )
    }
}

ReactDOM.render(
    <InputChange />,
    document.getElementById("example")

代码解读：
　　首先定义了两个函数toUpper,toLower，分别将输入的单词转化为相应的大小写单词
　　其次定义了一个父组件InputChange及子组件WordsInput,在子组件内利用props属性接受来自父组件传过来的type,value,onInputChange属性
　　在子组件WordsInput内,根据父组件内传入的属性type值的不同渲染出不同的文本，并在不同的input框内绑定相应的大小写单词，注册onChange事件，当input框内文本发生改变时，调用该事件所绑定的函数handleWordsInput，在handleWordsInput函数内部调用父组件传入的函数（即this.props.onInputChange,该函数用来重新更新父组件内部的状态）

实现原理:
　　将父组件内的属性及方法（该方法是对父组件内的状态更新）传给子组件，在子组件内绑定相应的事件，在事件处理函数中调用父组件内方法（以达到对父组件内状态更新的目的），当父组件内状态更新时会重新将相应的属性传给子组件。

造成的原因:
　　在react.js中数据是自上而下单向流动的，故在子组件内只能利用props属性来来自父组件的值，而在该实例中的大写input框和小写input框是属于同级组件，无法利用props属性相互传值，故只能在父组件内共享数据，而在子组件内利用事件处理函数来调用父组件内对状态的处理函数。

个人理解，仅供参考，如有错误，还望提出！