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

最新推荐文章于 2024-10-08 22:50:32 发布

江禾

最新推荐文章于 2024-10-08 22:50:32 发布

阅读量8.4k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_45785424/article/details/107167777

版权

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在React应用中使用Ant Design的Input组件实现从父组件向子组件传递值，并允许子组件中的Input输入框进行编辑。通过设置Input的defaultValue属性并配合key值，实现了父组件和子组件间的数据同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用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