Question

我想做的是添加bootstrap-react模态并从无状态函数中触发它。我可以找到的所有示例都需要更改组件状态下的“显示”，但是由于我不使用af组件，所以我真的不知道该怎么做。

https://react-bootstrap.github.io/components/modal/

Answer 1

https://react-bootstrap.github.io/components/modal/

您需要在state处显示模态。您可以使用useState在功能（并非真正的“无状态”）组件中使用钩子来执行此操作。

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="primary" onClick={() => setOpen(true)}>
        Launch demo modal
      </Button>

      <Modal show={open} onHide={() => setOpen(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setOpen(false)}>
            Close
          </Button>
          <Button variant="primary" onClick={() => setOpen(false)}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

codesandbox：https://codesandbox.io/embed/z2ky5l128l

如果您不想这样做，则需要从树上较高的组件传递prop，例如：

class App extends React.Component {
  state = {
    open: true,
  }
  render() {
    return <ModalComponent open={open} hide={() => this.setState({open: false})} />
  }
}

function ModalComponent = ({open, hide}) => (
  <Modal show={open} onHide={hide}>
    <Modal.Header closeButton>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={hide}>
        Close
      </Button>
    </Modal.Footer>
  </Modal>
)

Answer 2

仅通过如下所示的父母的可见状态

 class parent extends Component {

   state = {
     modalVisibility : false
   }

   handleModalVisibility = (action)=> this.setState({modalVisibility : action})

   return (
       <div>
        <button onClick={this.handleModalVisibility.bind(this,true)} >Show Modal</button>
       //use this props to show or cancel the modal
       <ModalComponent visibility ={this.state.modalVisibility} handleModal={this.handleModalVisibility} />
       </div>
   )

 }

Answer 3

我想你可以用useState做到这一点 https://reactjs.org/docs/hooks-state.html

无法在无状态功能中使用引导反应模式

3 个答案: