隐藏反应选择

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