Antd Select 自定义返回值

antd 版本：4.15.0

一、基本用法

1.1 使用数据创建

import React from "react";
import {Select} from "antd";
export default class Select1 extends React.Component{
    onChange = (value,option)=>{
        console.log("value:",value);
        console.log("option:",option);
    }
    render() {
        const options = [
            {label:"第三",value:"第三"},
            {label:"第四",value:"第四"}
        ];
        return <Select style={{width:100}} options={options} onChange={this.onChange}/>
    }
}

输出结果

value: 第一
option: {key: null, value: "第一", children: "第一"}

1.2 使用 Option 创建

import React from "react";
import {Select} from "antd";
export default class Select1 extends React.Component{
    onChange = (value,option)=>{
        console.log("value:",value);
        console.log("option:",option);
    }
    render() {
        return <Select style={{width:100}} onChange={this.onChange}>
            <Select.Option value={"第一"}>第一</Select.Option>
            <Select.Option value={"第二"}>第二</Select.Option>
        </Select>
    }
}

输出结果

value: 第三
option: {label: "第三", value: "第三"}

二、自定义返回值

两种基本用法中 onChange 事件返回的两个参数

• value
• option

想要自定义返回参数，从两个参数入手

2.1 value 传递对象（失败）

    render() {
        return <Select style={{width:100}} onChange={this.onChange}>
            <Select.Option value={"第一"}>第一</Select.Option>
            <Select.Option value={"第二"}>第二</Select.Option>
            <Select.Option value={{name:"第一"}}>第一</Select.Option>
        </Select>
    }
<!--或者-->
    render() {
        const options = [
            {label:"第三",value:"第三"},
            // {label:"第四",value:"第四"},
            {label:"第四",value:{name:"第四"}}
        ];
        return <Select style={{width:100}} options={options} onChange={this.onChange}/>
    }

两种方式均报错

Uncaught Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

2.2 option 传递对象（成功）

import React from "react";
import {Select} from "antd";
export default class Select1 extends React.Component{
    onChange = (value,option)=>{
        console.log("value:",value);
        console.log("option:",option);
    }
    render() {
        return <Select style={{width:100}} onChange={this.onChange}>
            {/*<Select.Option value={{name:"第一"}}>第一</Select.Option>*/}
            <Select.Option value={"第一"}>第一</Select.Option>
            {/*<Select.Option value={"第二"}>第二</Select.Option>*/}
            <Select.Option value={"第二"} data={{name:"第2",value:"第2"}}>第二</Select.Option>
        </Select>
    }
}

输出结果

value: 第一
option: {key: null, value: "第一", children: "第一"}
value: 第二
option: {key: null, value: "第二", children: "第二", data: {name: "第2", value: "第2"}}

三、在 Form 中应用

在表单中有多个表单项必填，可以通过 Select 组件自定义返回值填充其他表单项来达到快速填写的目的。

3.1 自定义之前

<!--改造前-->
import React from "react";
import {Button, Form, Input} from "antd";
export default class MyForm extends React.Component{
     onFinish = (values) => {
        console.log('Success:', values);
    };
     onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    render() {
        return <Form
            name="basic"
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
        >
            <Form.Item
                label="name1"
                name="name1"
                rules={[{ required: true, message: 'Please input name1!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="name2"
                name="name2"
                rules={[{ required: true, message: 'Please input name2!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="name3"
                name="name3"
                rules={[{ required: true, message: 'Please input name3!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    }
}

直接使用 Select 组件是无法直接将自定义返回值传递给 Form 的，所以需要自定义组件。

自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

• 提供受控属性 value 或其它与 valuePropName 的值同名的属性。

• 提供 onChange 事件或 trigger 的值同名的事件

3.2 自定义 Select

import React from "react";
import {Select} from "antd";
export default class MySelect extends React.Component{
    constructor(props) {
        super(props);
        this.options = [
            {title:"第一",name1:"1-1",name2:"1-2",name3:"1-3"},
            {title:"第二",name1:"2-1",name2:"2-2",name3:"2-3"},
            {title:"第三",name1:"3-1",name2:"3-2",name3:"3-3"},
        ]
    }
    onChange = (value,option)=>{
        // console.log("value:",value);
        // console.log("option:",option);
        const { onChange } = this.props;
        if (option){
            //已有选择
            const { data }=option;
            onChange && onChange(data)
        }else {
            //清空选择
            onChange && onChange({})
        }

    }
    render() {
        return <Select style={{width:100}} onChange={this.onChange}>
            {
                this.options.map((item)=>{
                    return <Select.Option
                                    key={item.title}
                                    value={item.title}
                                    data={item}>
                                {item.title}
                            </Select.Option>
                })
            }
        </Select>
    }
}

3.3 Form 实现

import React from "react";
import {Button, Form, Input} from "antd";
import MySelect from "./MySelect";
export default class MyForm extends React.Component{
    constructor(props) {
        super(props);
        this.formRef = null;
    }
     onFinish = (values) => {
        console.log('Success:', values);
    };
     onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    onValuesChange = (changedValues, allValues)=>{
        // console.log('changedValues:', changedValues,this.formRef);
        //获取Select的返回值
        const { select }=changedValues;
        //调用 From 方法，设置表单项值
        this.formRef && this.formRef.setFieldsValue(select);
    }
    render() {
        return <Form
            name="basic"
            ref={ref => this.formRef = ref}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
            onValuesChange = {this.onValuesChange}
        >
            <Form.Item
                label="select"
                name="select"
                rules={[{ required: true, message: 'Please input select!' }]}
            >
                <MySelect />
            </Form.Item>
            <Form.Item
                label="name1"
                name="name1"
                rules={[{ required: true, message: 'Please input name1!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="name2"
                name="name2"
                rules={[{ required: true, message: 'Please input name2!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="name3"
                name="name3"
                rules={[{ required: true, message: 'Please input name3!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    }
}