antd radio和form提交冲突解决

最新推荐文章于 2023-08-16 14:35:19 发布

zerocher

最新推荐文章于 2023-08-16 14:35:19 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web开发 js

本文链接：https://blog.youkuaiyun.com/zerocher/article/details/81949223

web开发同时被 2 个专栏收录

39 篇文章

订阅专栏

19 篇文章

订阅专栏

本文介绍了一种基于React的计价模式选择组件实现方法，包括如何处理RadioGroup与getFieldDecorator之间的value冲突，并通过radioChange方法确保Radio按钮的正确选中状态。

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

<Row ref={this.valuationModel} className="custom-option">
    <Col span={18} offset={1}>
        <Item
            {...ItemArea}
            label='计价模式'

        >
            {
                getFieldDecorator('valuationModel',{
                    getValueFromEvent: this.radioChange
                })(
                    <RadioGroup onChange={this.radioChange}>
                        <Radio value='nums' key='1'>按数量计价</Radio>
                        <Radio value='car' key='2'>按每车计价</Radio>
                        <Radio value='mileage' key='3'>按里程数计价</Radio>
                        <Radio value='startMileage' key='4'>按起步里程数计价</Radio>
                        <Radio value='duringMileage' key='5'>按里程数区间计价</Radio>
                    </RadioGroup>
                )
            }
        </Item>
    </Col>
</Row>

radioChange = (e)=>{
    console.log(1111111)
    console.log(e.target.value)
    let t_valua = e.target.value
    this.setState({
        valuation: e.target.value,
    })
    return t_valua
};

RadioGroup中的value会和getFieldDecorator中的value冲突，getValueFromEvent重新绑定就可以直接使用RadioGroup中的操作了；记得在radioChange 方法中returen赋值前的value，否则radio不会高亮