React boil

来源：互联网发布：fsfr1700xsl数据手册编辑：程序博客网时间：2024/05/16 05:17
<html>  <head>      <title>Document</title>      <script src="../react.js"></script>      <script src="../react-dom.js"></script>      <!-- //引用资源，JSX转HTML -->      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>  </head>  <body>      <div id="reactContainer"/>      <script type="text/babel">        function BoilingVerdict(props) {          if (props.celsius >= 100)            return <p>The water would boil.</p>          return <p>The water would not boil.</p>        }        class Calculator extends React.Component {          constructor(props) {            super(props)            this.state = {temperature: ''}            this.handleChange = this.handleChange.bind(this)          }          handleChange(e) {            console.log(this.state.temperature)            this.setState({temperature: e.target.value})          }          render() {            const temperature = this.state.temperature            return (              <fieldset>                <legend>Enter temperature in Celsius:</legend>                <input type="text" value={temperature} onChange={this.handleChange}/>                <BoilingVerdict celsius={temperature}/>              </fieldset>            )          }        }        ReactDOM.render(          <Calculator/>,          document.getElementById('reactContainer')        )      </script>  </body></html>
阅读全文
0 0