javascript - 隐藏 react 选择

Question

我使用 React-Select 是因为它能够让用户在输入时过滤下拉列表。我需要添加另一个功能，根据下拉列表的另一个值，下一个下拉列表应该是可见或隐藏的。

我知道如何从父子传递 Prop 。我无法弄清楚的是我怎样才能让 React-Select 消失？我检查了文档 here并且没有这样的属性。

我尝试手动编辑 HTML 属性:display = "none"或 "block"，但它似乎没有改变任何东西。

这是它现在的样子:

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

我已经为与我情况相似的人找到了解决此问题的方法，请查看 here .

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