使用ant-design组件里面Input,既能传入更改的值,又能编辑该输入框

在使用ant-design组件里面Input时,遇到以下情况:在父组件有个input框,子组件也有一个input框,点击父组件的传入按钮,值能够传入子组件中,且子组件里的input框的里面的值能够编辑
父组件

import React, {
    
     Component } from "react"
import {
    
     Input, Modal, Button } from 'antd';
import Toast from './toast'

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);
        this.setState({
    
    
            visible: false,
        });
    };

    handleCancel = e => {
    
    
        console.log(e);
        this.setState({
    
    
            visible: false,
        });
    };

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

export default Test

子组件

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(this.props.jobNumber)
        // this.setState({
    
    
        //     jobNumber2: this.props.jobNumber
        // })
        this.jobNumber2 = this.props.jobNumber
    }

    componentWillReceiveProps = (nextProps) => {
    
    
        console.log(nextProps.jobNumber)
        // this.setState({
    
    
        //     jobNumber2: nextProps.jobNumber
        // })
        this.jobNumber2 = nextProps.jobNumber
    }

    handleNumber2 = (e) => {
    
    
        console.log(e.target.value)
        this.setState({
    
    
            jobNumber2: e.target.value
        })
    }


    render() {
    
    
        return (
            <div>
                <Input placeholder="请输入"
                    style={
    
    {
    
     width: "150px" }}
                    onChange={
    
    this.handleNumber2}
                    defaultValue={
    
    this.jobNumber2}
                    key={
    
    this.jobNumber2} />
            </div>
        )
    }
}

export default Toast

主要使用Input自带的defaultValue属性,然后添加一个key值即可.