React学习之——状态提升

最新推荐文章于 2024-09-13 10:46:15 发布

芜独独

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量207

点赞数 1

分类专栏： React 文章标签： react jsx 前端 react.js

本文链接：https://blog.csdn.net/awwwwmman/article/details/118960527

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React文档之状态提升链接链接: link.

状态提升:

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享

实现一个华氏度和摄氏度的转换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <div id="root"></div>

  <script type="text/babel">

  // 状态提升:
  // 在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。
    
    //  定义键值对
    const scaleNames = {
      c:'Celsius',
      f:'Fahrenheit'
    }

    // 将华氏度转换为摄氏度
    function toCelsius(fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }

    // 将摄氏度转换为华氏度
    function toFahrenheit(celsius) {
      return (celsius * 9 / 5) + 32;
    }

    // 温度转换
    function tryConvert(temperature,convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }

    // 判定水开了没有
    function BoilingVerdict(props) {
      if (props.celsius >= 100) {
        return <p>The water would boil .</p>
      }
      return <p>The water would not boil</p>
    }
    
    // 温度输入组件
    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        // this.state = {temperature:''};
      }

      handleChange(e) {
        // this.setState({temperature:e.target.value});
        this.props.onTemperatureChange(e.target.value);
      }

      render() {
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input 
            value={temperature}
            onChange={this.handleChange}
            />
          </fieldset>
        )
      }
    }

    // 计算组件
    class Caculator extends React.Component {
      constructor(props) {
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {temperature:'',scale:'c'};
      }

      handleCelsiusChange(temperature) {
        this.setState({scale:'c',temperature});
      }

      handleFahrenheitChange(temperature) {
        this.setState({scale:'f',temperature});
      }

      render() {
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        const celsius = scale === 'f' ? tryConvert(temperature,toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature,toFahrenheit) : temperature;
        return (
          <div>
            <TemperatureInput
             scale='c'
             temperature={celsius}
             onTemperatureChange={this.handleCelsiusChange} />
            <TemperatureInput
             scale='f'
             temperature={fahrenheit}
             onTemperatureChange={this.handleFahrenheitChange} />
             <BoilingVerdict
               celsius={parseFloat(celsius)} />
          </div>
        )
      }
    }

    ReactDOM.render(<Caculator />,document.getElementById('root'))
  </script>
</body>
</html>