react使用antd自定义form表单

antd自定义表单的官方说明：

具体使用：

子组件封装：

自定义form组件，在引入的使用已经提供了value和onChange方法，所以在子组件中直接使用就行了。

import {Component} from "react";
import {Select} from "antd";
import {getChannels} from "../../api/channel";

export default  class Channel extends Component{
    state = {
        articleChannel:[]
    }


    componentDidMount() {
        //获取频道字典
        getChannels().then(res=>{
            this.setState({articleChannel:res.data.channels})
        })
    }

    render(){
        console.log(this.props,'____')
        return (
            <Select style={{width:200}} placeholder='请选择文章频道' value={this.props.value} onChange={this.props.onChange}>
                {
                    this.state.articleChannel.map(item=>{
                        return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                    })
                }
            </Select>
        )
    }
}

父组件使用：

import style from './index.module.scss'
import {Component} from "react";
import {
    Card,
    Form
} from "antd";
//引入子组件
import Channel from "../../components/common/Channel";

    class ArticlePublish extends Component {

        onFinish = (values)=>{
            console.log(values)
        }
        render() {
            return (
                <div className={style.articlePublish}>              
                    <Card>
                            <Form labelCol={{span: 4,}} wrapperCol={{span: 14,}} layout="horizontal" onFinish={this.onFinish}>
                                <Form.Item label="频道" name='channel' rules={[{required:true,message:"文章频道不能为空"}]}><Channel /></Form.Item>
                            </Form>
                    </Card>
                </div>
            )
        }
    }


export default ArticlePublish;

这篇好文章是转载于：学新通技术网