React官方文档--Lifting State Up
2016-11-01 15:01
519 查看
Lifting State Up
如果,几个组件需要同时影响并且修改同一个数据,我们建议将这个共享状态进行提升,给他们最近的共同祖先。在这个部分,我们将要创建一个温度计算器来判断水会不会在给定温度下沸腾。
我们将从一个叫做
BoilingVerdict的组件开始,这个组件接收
celsius温度作为属性,然后打印是否足够让水沸腾。
然后我们创建一个组件叫做
Calculator,这个组件渲染一个
<input>元素让你输入温度,并且将温度存储在
this.state.value中,另外,他渲染了
BoilingVerdict元素,通过当前输入的值。
function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The water would boil.</p>; } else { return <p>The water would not boil.</p>; } } class Calculator extends React.Component { constructor(props) { super(props); this.state = { value: "" }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } render() { return ( <div> <label htmlFor="temp">celsius: </label> <input type="text" value={this.state.value} name="temp" onChange={this.handleChange}/> <br/> <BoilingVerdict celsius={this.state.value}/> </div> ); } } ReactDOM.render( <Calculator />, document.getElementById("root") );
添加第二个输入
我们的新的需求是,除了摄氏温度的输入,还添加一个华氏温度的输入,然后这两个保持是异步的。我们通过拆分一个
TempertatureInput组件开始,我们将会添加一个新的
scale属性来标记是摄氏还是华氏。
const scaleNames = { c: 'Celsius', f: 'Fahrenheit' }; function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The water would boil.</p>; } return <p>The water would not boil.</p>; } function toCelsius(fahrenheit) { return (fahrenheit - 32) * 5 / 9; } function toFahrenheit(celsius) { return (celsius * 9 / 5) + 32; } function tryConvert(value, convert) { const input = parseFloat(value); if (Number.isNaN(input)) { return ''; } const output = convert(input); const rounded = Math.round(output * 1000) / 1000; return rounded.toString(); } class TemperatureInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { value: '' } } //这里封装了父组件的onChange函数 handleChange(event) { this.props.onChange(event.target.value); } render() { const value = this.props.value; const scale = this.props.scale; return ( <fieldset> <legend>Enter Temperature in {scaleNames[scale]}: </legend> <input type="text" value={value} onChange={this.handleChange}/> </fieldset> ); } } class Calculator extends React.Component { constructor(props) { super(props); this.handleCelsiusChange = this.handleCelsiusChange.bind(this); this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this); this.state = { value: '', scale: 'c' }; } handleCelsiusChange(value) { console.log(value); this.setState({ scale: 'c', value }); } handleFahrenheitChange(value) { console.log(value); this.setState({ scale: 'f', value }); } render() { const scale = this.state.scale; const value = this.state.value; const celsius = scale === 'f' ? tryConvert(value, toCelsius) : value; const fahrenheit = scale === 'c' ? tryConve 4000 rt(value, toFahrenheit) : value; return ( <div> //这个组件的onChange函数是经过TemperatureInput封装的 <TemperatureInput scale="c" value={celsius} onChange={this.handleCelsiusChange} /> <TemperatureInput scale="f" value={fahrenheit} onChange={this.handleFahrenheitChange} /> <BoilingVerdict celsius={parseFloat(celsius)} /> </div> ); } } ReactDOM.render( <Calculator />, document.getElementById("root") );
相关文章推荐
- Reactjs入门官方文档(九)【lifting-state-up】
- React 官方文档初释义 —— State and Lifecycle(四)
- React - Lifting state up 提升状态
- Reactjs入门官方文档(四)【state-and-lifecycle】
- React官方文档--State and Lifecycle
- React.js 官方文档翻译2
- React 实现井字棋游戏 (tic-tac-toe) 教程 (2) <译自官方文档>
- React官方文档--Lists and Keys
- React官方文档--Forms
- React 实现井字棋游戏 (tic-tac-toe) 教程 (4) <译自官方文档>
- React官方文档—1. 安装
- React官方文档--Composition vs Inheritance
- React文档(十一)提升state
- saltstack官方文档——Highstate data structure definitions
- part2 react官方文档笔记09--JSX In Depth
- state-threads官方文档介绍篇翻译
- React官方文档—2. Hello World
- React.js 官方文档摘记:非受控组件
- React官方文档—3.JSX 简介
- React.js 官方文档摘记:表单