antd radio和form提交冲突解决

最新推荐文章于 2024-05-20 17:41:33 发布

原创最新推荐文章于 2024-05-20 17:41:33 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

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

39 篇文章

订阅专栏

19 篇文章

订阅专栏

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

<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不会高亮