Question

我使用React-Select是因为它具有使用户能够在键入时过滤下拉列表的功能。我需要添加其他功能，以便基于下拉列表的另一个值，下一个下拉列表应该是可见的或隐藏的。

我知道如何从亲子传递道具。我无法确定的是如何使React-Select消失？我检查了文档here，但没有这样的属性。

我尝试手动编辑HTML属性：display =“ none”或“ block”，但似乎没有任何改变。

这是现在的样子：

display: block;

对于与我有类似情况的人，我已经找到了解决此问题的方法，请查看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

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的价值）

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>
  )
}

隐藏反应选择

3 个答案: