antd 如何实现点击两个按钮下方显示对应内容？

Question

问题描述

如何实现以下效果？

最终效果：

目前是这样的状态：

无论点击哪个按钮下方内容还是一样的

return <Modal

  title={is_edit ? "" : "售价防火墙添加"}
  wrapClassName='l_edit_power_modal'
  visible={visible}
  onCancel={this.handleCancel}
  footer={null}
  maskClosable={false}
  width={700}
>
  {visible ? <Form autoComplete='off' {...formItemLayout}>
    {is_edit ? '' : (<Form.Item label='折扣类型'>
      {getFieldDecorator('colorStatus', {
        rules: [{required: true, message: '必填'}],
        initialValue: !!is_edit ? detail.colorStatus : 1
      })(
        <Radio.Group>
          <Radio value={1}>特殊折扣</Radio>
          <Radio value={0}>默认折扣</Radio>
        </Radio.Group>
      )}
    </Form.Item>)}
    
    底下这里我该怎么写判断？
    暂时是写的这样的，但是不对，这里需要怎么修改呢？
    
  {
      detail.colorStatus !== 1? (<Form.Item label='品类'>
        {getFieldDecorator('chineseColor', {
          rules: [{required: true, message: '必填'}],
          initialValue: detail.chineseColor || ''
        })(
          <Input placeholder='品类'/>
        )}
      </Form.Item>):(<Form.Item label='2222'>
        {getFieldDecorator('22', {
          rules: [{required: true, message: '必填'}],
          initialValue:''
        })(
          <Input placeholder='输入英文颜色'/>
        )}
      </Form.Item>)
    
    
    
    
    
    
    
    
    
    

Answer 1

关于这个问题你可以参考http://www.5ibobo.com/code/49...，这是我早期写的，你把下拉选框改成单选框就行了。源码不再贴了，文章中都有。