Ant-design-mobile: radio 如何使用 rc-form 包装?

Created on 3 Jun 2017  ·  5Comments  ·  Source: ant-design/ant-design-mobile

What problem does this feature solve?

官网的列子都是 多个 radioItem,监听 onchange方法,checked判断值是否为选中,如果用 rc-form 该如何使用呢?应该是类似 select 那样的用法吧

What does the proposed API look like?

Radio 下包裹 RadioItem,在父组件上设置 getFieldDecorator

Usage

Most helpful comment

I am new to ant mobile,this is my use of the radioitem tag with rc-form

import React, { Component } from 'react'
import {List, InputItem, WingBlank, WhiteSpace, Button,Radio} from 'antd-mobile'


import {createForm} from 'rc-form'

class register extends Component {
    handleRegister=()=>{
        this.props.form.validateFields((error, values) => {
            if (!error) {
                console.log('ok', values);
            } else {
                console.log('error', error, values);
            }
        });

    }
    handleOnChange=(type)=>{
        this.props.form.setFieldsValue({
            type
        })
    }
    locateLogin =()=>{

    }
    render() {
        const { getFieldProps,getFieldError,getFieldValue } = this.props.form;
        let RadioItem = Radio.RadioItem;
        return (
            <div>

                <List>
                    <div className='container'>


                        <Radio {...getFieldProps('type')} >
                            <RadioItem
                                key="genius"
                                onChange={()=>this.handleOnChange('genius')}
                                checked={getFieldValue('type') === 'genius'}
                            >
                                genius
                            </RadioItem>
                            <RadioItem
                                key="boss"
                                onChange={()=>this.handleOnChange('boss')}
                                checked={getFieldValue('type') === 'boss'}

                            >
                                BOSS
                            </RadioItem>
                        </Radio>

                        <WhiteSpace />

                        <Button  onClick={this.handleRegister} type="primary">
                            login
                        </Button>
                        <WhiteSpace/>
                        <Button onClick={this.locateLogin} type="primary">register</Button>
                    </div>

                </List>
            </div>
        )
    }
}

export default createForm()(register)

All 5 comments

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: https://github.com/ant-design/ant-design/issues/4897

用法问题、不应该在这里提 issue,需要自己尝试探索。


遇到具体的使用过程细节问题可以提到 https://segmentfault.com/t/antd

Hello @huyansheng3, we use GitHub issues to trace bugs or discuss plans of Ant Design. So, please don't ask usage questions here. You can try to ask questions on Stack Overflow or Segment Fault, then apply tag antd and react to your question.

@huyansheng3 hi, i got the same situation with you, did you get this solved?

I am new to ant mobile,this is my use of the radioitem tag with rc-form

import React, { Component } from 'react'
import {List, InputItem, WingBlank, WhiteSpace, Button,Radio} from 'antd-mobile'


import {createForm} from 'rc-form'

class register extends Component {
    handleRegister=()=>{
        this.props.form.validateFields((error, values) => {
            if (!error) {
                console.log('ok', values);
            } else {
                console.log('error', error, values);
            }
        });

    }
    handleOnChange=(type)=>{
        this.props.form.setFieldsValue({
            type
        })
    }
    locateLogin =()=>{

    }
    render() {
        const { getFieldProps,getFieldError,getFieldValue } = this.props.form;
        let RadioItem = Radio.RadioItem;
        return (
            <div>

                <List>
                    <div className='container'>


                        <Radio {...getFieldProps('type')} >
                            <RadioItem
                                key="genius"
                                onChange={()=>this.handleOnChange('genius')}
                                checked={getFieldValue('type') === 'genius'}
                            >
                                genius
                            </RadioItem>
                            <RadioItem
                                key="boss"
                                onChange={()=>this.handleOnChange('boss')}
                                checked={getFieldValue('type') === 'boss'}

                            >
                                BOSS
                            </RadioItem>
                        </Radio>

                        <WhiteSpace />

                        <Button  onClick={this.handleRegister} type="primary">
                            login
                        </Button>
                        <WhiteSpace/>
                        <Button onClick={this.locateLogin} type="primary">register</Button>
                    </div>

                </List>
            </div>
        )
    }
}

export default createForm()(register)
Was this page helpful?
0 / 5 - 0 ratings