Question

我想基于渲染条件选择值更改元素，我该怎么做？当选择框的值更改时，我想用另一个替换代码下面的元素，有人可以帮助我应对渲染条件吗？

<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 element into controlled component，其选择值取决于您所在状态的值。然后，您可以轻松指定条件，例如：

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

Answer 2

尝试一下。在变量中获取所选内容的值，然后进行比较。

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

根据选择框的条件渲染元素reactjs

2 个答案: