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 :{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 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.on Finish}
onFinishFailed ={this.on FinishFailed}
<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 )=> {
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.on Finish}
onFinishFailed ={this.on FinishFailed}
onValuesChange = {this.on ValuesChange}
<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>
复制代码 165
Mannqo
Express
Node.js
