2022-08-12

····

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import PropTypes from 'prop-types'

// class Weather extends React.Component{

//   constructor(props){

//     super(props)

//     this.state = {

//       isHot: true

//     }

//   }

//   changeWeather(){

//     this.setState({

//       isHot: !this.state.isHot

//     })

//   }

//   render(){

//     const {isHot} = this.state

//     return (

//       <h1 onClick={()=>this.changeWeather()}>今天天气很{isHot==true?"炎热":"凉爽"}!</h1>

//     )

//   }

// }

// class Ul_li extends React.Component{

//   render(){

//     const {name, age, sex} = this.props

//     return (

//       <ul>

//         <li>姓名：{name}</li>

//         <li>性别：{sex}</li>

//         <li>年龄：{age}</li>

//       </ul>

//     )

//   }

// }

// Ul_li.propTypes = {

//   name: PropTypes.string.isRequired,

//   sex: PropTypes.string,

//   age: PropTypes.number

// }

// Ul_li.defaultProps = {

//   name: "xxxx",

//   age: 313323,

//   sex :"不男不女"

// }

class Demo extends React.Component{

  // showData = ()=>{

  //   // const myRef = this.myRef

  //   debugger

  //   alert(this.myRef.current.value)

  // }

  // showData2 = (e)=>{

  //   debugger

  //   console.log(e.target.value)

  // }

  // render(){

  //   return (

  //     <div>

  //       <input ref={(currentNode)=>{this.input1 = currentNode}} type="text" placeholder='点击按钮提示数据'/>

  //       <button ref="btn1" onClick={this.showData}>点击显示左侧的数据</button>

  //       <input ref={(currentNode)=>{this.input2 = currentNode}} type="text" onBlur={this.showData2} placeholder='失去焦点提示数据'/>

  //     </div>

  //   )

  // }

    // saveInput = (c)=>{

    //   this.input1 = c

    // }

    // saveInput2 = (c)=>{

    //   this.input2 = c

    // }

    // render(){

    // return (

    //   <div>

    //     <input ref={this.saveInput} type="text" placeholder='点击按钮提示数据'/>

    //     <button ref="btn1" onClick={this.showData}>点击显示左侧的数据</button>

    //     <input ref={this.saveInput2} type="text" onBlur={this.showData2} placeholder='失去焦点提示数据'/>

    //   </div>

    // )

    // myRef = React.createRef()

    // myRef1 = React.createRef()

  //   render(){

  //     return (

  //       <div>

  //         <input ref={this.myRef} type="text" placeholder='点击按钮提示数据'/>

  //         <button ref="btn1" onClick={this.showData}>点击显示左侧的数据</button>

  //         <input ref={this.myRef1} type="text" onBlur={this.showData2} placeholder='失去焦点提示数据'/>

  //       </div>

  //     )

  // }

  // login = ()=>{

  //   const {username, password} = this

  //   alert(`用户名${username.value}，密码是${password.value}。` )

  // }

  // render() {

  //   return (

  //     <form>

  //       用户名：<input type="text" ref={c=>this.username=c} placeholder='用户名'/>

  //       密码：<input type="text" ref={c=>this.password=c} placeholder='密码'/><button onClick={this.login}>登录</button>

  //     </form>

  //   )

  // }

  state = {

    input1Value: "",

    input2Value: ""

  }

  demo1 = (dateType)=>{

    return (e)=>{

      this.setState({

        [dateType]: e.target.value

      })

    }

  }

  login = (e)=>{

    const {input1Value, input2Value} = this.state

    console.log(`用户名${input1Value}，密码是${input2Value}。` )

    e.preventDefault()

  }

  render() {

    return (

      <form>

        用户名：<input type="text" onChange={this.demo1("input1Value")} placeholder='用户名'/>

        密码：<input type="text" onChange={this.demo1("input2Value")}  placeholder='密码'/><button onClick={this.login}>登录</button>

      </form>

    )

  }

}

const root = ReactDOM.createRoot(document.getElementById("root"));

// const obj = { age: 20, xsex: "男344"}

root.render(<Demo />);xZxz

···