隱藏反應選擇

Question

我之所以使用React-Select，是因為它具有使用戶能夠在鍵入時過濾下拉列表的功能。 我需要添加其他功能，以便基於下拉列表的另一個值，下一個下拉列表應該是可見的或隱藏的。

我知道如何從親子傳遞道具。 我無法確定的是如何使React-Select消失？ 我在這里檢查了文檔，沒有這樣的屬性。

我嘗試手動編輯HTML屬性：display =“ none”或“ block”，但似乎沒有任何改變。

這是現在的樣子：

<FormGroup row>
    <Col md={6}>
        <Select 
            placeholder={label}
            name={fieldName}
            onChange={method1}
            options={options}
            display="none" />
    </Col>
</FormGroup>

對於與我類似的情況，我已經找到了解決此問題的方法，請在此處查看 。

Answer 1

在這里你有一個解決方案

 const customStyles = { singleValue: (provided, state) => { const display = "none"; return { ...provided, display }; } } 

 <FormGroup row> <Col md={6}> <Select styles={customStyles} /> </Col> </FormGroup> 

說明文件： https : //react-select.com/styles#style-object

Answer 2

對於Bootstrap 4：

<FormGroup row>
  <Col md={6}>
    <Select className="d-none" />
  </Col>
</FormGroup>

對於Bootstrap 3：

<FormGroup row>
  <Col md={6}>
    <Select className="hide" />
  </Col>
</FormGroup>

Answer 3

如果您只是希望它立即消失（ shouldDisplay自己提供shouldDisplay值）：

 render() { return ( <FormGroup row> <Col md={6}> { !shouldDisplay ? null : ( <Select placeholder={label} name={fieldName} onChange={method1} options={options} display="none" /> )} </Col> </FormGroup> ) } 

或者，如果要顯示一些帶有過渡的CSS規則，請用一個可以控制樣式的組件包裝“選擇”。

 render() { return ( <FormGroup row> <Col md={6}> <div style={{display: "none"}}> <Select placeholder={label} name={fieldName} onChange={method1} options={options} display="none" /> </div> </Col> </FormGroup> ) }