Question

是否可以在不使用状态处理程序的情况下将reactstrap UncontrolledCollapse组件的行为默认更改为打开？

Answer 1

如果您想不受控制地折叠并且不想切换打开/关闭状态，则可以将isOpen道具传递为true，它将起作用。

 <UncontrolledCollapse isOpen={true} toggler="#toggler">
      <Card>
        <CardBody>
          <div>UncontrolledCollapse</div>
        </CardBody>
      </Card>
  </UncontrolledCollapse>

但是如果您以后想使其变为可切换状态，则可以执行以下操作

class App extends React.Component {
  state = { isOpen: true }; // isOpen is set to true by default.

  handleClick = () => {
    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
  };

  render() {
    return (
      <div className="App">
        <button id="toggler" onClick={this.handleClick}>
          Toggle
        </button>
        <UncontrolledCollapse isOpen={this.state.isOpen} toggler="#toggler">
          <Card>
            <CardBody>
              <h1>Hello CodeSandbox</h1>
              <h2>Start editing to see some magic happen!</h2>
            </CardBody>
          </Card>
        </UncontrolledCollapse>
      </div>
    );
  }
}

这是codeandbox的链接：https://codesandbox.io/s/jlo137vynw

Answer 2

您需要在defaultOpen={true}组件中设置属性UncontrolledCollapse。

在https://github.com/reactstrap/reactstrap/blob/master/src/UncontrolledCollapse.js处查看UncontrolledCollapse的原始代码

更改reactstrap UncontrolCollapse的默认行为

2 个答案: