React:状态提升案例-烧开水

最新推荐文章于 2024-06-21 00:14:31 发布

kilig坚果

最新推荐文章于 2024-06-21 00:14:31 发布

阅读量206

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_45922461/article/details/112481284

版权

本文通过一个烧开水的案例，详细讲解了如何在React中进行状态提升，实现组件间的通信。首先定义了BoilingVerdict组件，接着创建了两个输入框，并通过状态提升实现双向输入绑定。接着介绍了如何添加转换函数，并在新建的utils文件夹及index.js文件中进行实现，最后展示了应用的最终效果。

摘要由CSDN通过智能技术生成

1.定义Boilingverdict组件

function Boilingverdict(props){
   
    if(props.celsius>=100){
   
        return <h1>水烧开了</h1>
    }else{
   
        return <h1>水凉凉</h1>
    }
}
export default Boilingverdict

2.定义第一个输入框

import React from "react"
import Boilingverdict from "./Boilingverdict"
class Calculator extends React.Component{
   
    constructor(){
   
        super()
        this.state={
   
            temperature:""
        }
    }
    inputChange(e){
   
        this.setState({
   
            temperature:e.target.value
        })
    }
    render(){
   
        return (
            <div>
                <fieldset>
                    <legend>input</legend>
                    <input type="text" onChange={
   this.inputChange.bind(this)}/>
                </fieldset>
                <Boilingverdict celsius={
   this.state.temperature}/>
            </div>
        )
    }
}
export default Calculator

3.定义第二个输入框

//Calculator.js
import React from "react"
import Boilingverdict from "./Boilingverdict"
import Temperatureinput from "./TemperatureInput"
class Calculator extends React.Component{
   
    constructor(){
   
        super()
        this.state={
   
            temperature:""
        }
    }
    render(){
   
        return