根据 select 框 reactjs 的条件渲染元素

Question

我想根据渲染条件 select 值更改元素，我该怎么做？ 当 select 框的值发生变化时，我想用另一个替换我的代码下面的元素，有人可以帮助我反应渲染条件吗？

<Col span={12}>
       <Form.Item
           label='Số lượng'
           {...formItemLayout}
           labelAlign='left'
       >
           <Select
               onChange={this.handleChangeSelectDUC}
                defaultValue="Đơn lẻ"     
           >
               <Option
                   value="Đơn lẻ"
               >
                   Đơn lẻ
               </Option>
               <Option
                   value="Số lượng lớn"
               >
                   Số lượng lớn
               </Option>
           </Select>
       </Form.Item>
   </Col>
   <Col span={12}>
       {
          conditon if select value = "Đơn lẻ"
               ?
               (
               <FormItem
                   label='Số ĐT'
                   {...formItemLayout}
                   labelAlign='left'
               >
                   <Input
                       name='title'
                       onChange={this.handleChangeInput}
                   />
               </FormItem>
           ):(
               <FormItem
                   label='DS khách hàng'
                   {...formItemLayout}
                   labelAlign='left'
               >
                   <Upload {...props}>
                       <Button>
                           <Icon type="upload" /> Tải lên tệp
                       </Button>
                   </Upload>,
               </FormItem>
           )
       }
   </Col>

Answer 1

您需要将select 元素转换为受控组件，其中其选定值取决于 state 中的值。 然后您可以轻松地指定您的条件，例如：

{this.state.value === "Đơn lẻ" ? (
// render something
) : (
// render something else
)}

Answer 2

尝试这个。 在变量中获取 select 的值，然后进行比较。

<Col span={12}>
    {
        value == "Đơn lẻ" ?
        <FormItem1 ....> : 
        <FormItem2 ...>
    }
</Col>