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属性相互传值，故只能在父组件内共享数据，而在子组件内利用事件处理函数来调用父组件内对状态的处理函数。
个人理解，仅供参考，如有错误，还望提出！
