根據 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>