react的代码-Input学习

Input

看代码：

import React, { Component } from "react"
import { Input, Modal, Button } from 'antd';


class Toast extends React.Component{
    constructor(){
        super()
        this.state={
            jobNumber2:''
        }
    }
    jobNumber2
    componentDidMount=()=>{
        console.log('componentDidMount-start')
        console.log(this.props.jobNumber)
        this.jobNumber2 = this.props.jobNumber
        console.log('componentDidMount-end')
    }
    
    handleNumber2=(e)=>{
        console.log(e.target.value)
        this.setState({
            jobNumber2:e.target.value
        })
    };
    handleClick1 = ()=>{
        console.log(this.refs.inputtest)
    }

    render(){
        this.jobNumber2 = this.props.jobNumber
        return (
            <div>
                <Input placeholder="请输入"
                    style={{width:"150px"}}
                    onChange={this.handleNumber2}
                    defaultValue={this.jobNumber2}
                    key={this.jobNumber2} ref="inputtest"></Input>
                <Button onClick={this.handleClick1}>确认</Button>
            </div>
        )
    }
    
}

export default Toast

import React from 'react'
import ReactDom from 'react-dom'
import { useState } from 'react';
import Toast from './toast'
import { TreeSelect,Input,Button, Modal } from 'antd';


class Test extends React.Component{
  constructor(){
    super()
    this.state={
      jobNumber: "",
      visible:false
    }
  };
  handleNumber = (e) =>{
    console.log(e.target.value)
    this.setState({
      jobNumber:e.target.value
    })
  };
  handleChangeValue =(e)=>{
    this.setState({
      visible:true
    })
  };
  handleOk=e=>{
    console.log(e)
    console.log(this.refs.toast)

    this.setState({
      visible:false,
      jobNumber:this.refs.toast.state.jobNumber2
    })
  };
  handleCancle=e=>{
    console.log(e)
    this.setState({
      visible:false
    })
  };

  render(){
    return (
      <div>
        <Input placeholder='请输入' style={{width:"150px"}} onChange={this.handleNumber} value={this.state.jobNumber}></Input>
        <Button type='primary' onClick={this.handleChangeValue}> 传值 </Button>
        <Modal 
          title='Basic Modal'
          open={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancle}
          >
            <Toast jobNumber={this.state.jobNumber} ref="toast"></Toast>
        </Modal>
      </div>
    )
  }
}

const element = <Test></Test>

ReactDom.render(element,document.getElementById('root'))

看效果