Question

我也在使用react-bootstrap与react.js创建一个Web应用程序。

我要完成的事情是，当用户单击按钮时，将出现模态，但这没有发生。

按钮代码

<div className="rightButtons">
  <button name="updateItem" className="btn btn-primary" onClick={() => { this.onUpdateItem(this.props.selectedAppTypeId)}} >Update Item</button>
</div>

将被调用的功能。

onUpdateItem = (id) => {
    return (
      <div className="static-modal">
        <Modal.Dialog>
          <Modal.Header>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>

          <Modal.Body>One fine body...</Modal.Body>

          <Modal.Footer>
            <Button>Close</Button>
            <Button bsStyle="primary">Save changes</Button>
          </Modal.Footer>
        </Modal.Dialog>
      </div>
    );
  }

任何帮助都是很大的帮助。谢谢。

Answer 1

您遇到的问题是，您要传递一个React 功能组件作为事件处理程序；该函数的返回值是一个react组件，但是单独调用该函数不会将该组件安装在DOM中并显示出来。

实现此目标的更好方法可能是将Modal组件放置在组件中，并通过使用回调更改父组件的状态来控制是否显示该组件。

类似这样的东西：

class ParentComponent extends React.Component {
  showModal() {
    this.setState{
      modalActive: true;
    }
  }

  render() {
    <div>
      <Button onClick={showModal}>Show me the modal!</Button>
      <Modal active={this.state.modalActive} />
    </div>
  }
}

const modalComponent = (props) => {
  return (<div style={{ display: (props.isActive) ? "block" : "none "}}>
    <h1>I'm a modal!</h1>
  </div>)
}

我还没有检查，但是我确定React Bootstrap有自己的显示/隐藏模态的道具。

编辑：这是react bootstrap文档中的一个代码示例，显示了其使用情况https://react-bootstrap.github.io/components/modal/#modals-live

Answer 2

您正在将HTML返回到onClick处理程序中，而不是返回到Component的render方法中。如果要在onClick之后显示HTML内容，则需要在实际渲染中实际返回这些HTML元素。试试这个：

class Component extends React.Component {
   state = { 
       showModal: false
   }

   renderModal = () => {
    return (
      <div className="static-modal">
        <Modal.Dialog>
          <Modal.Header>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>

          <Modal.Body>One fine body...</Modal.Body>

          <Modal.Footer>
            <Button>Close</Button>
            <Button bsStyle="primary">Save changes</Button>
          </Modal.Footer>
        </Modal.Dialog>
      </div>
    );
   }

     render() {
      return(
        <div>
            <button onClick={() => this.setState({showModal:true})}> Show </button>
            {this.state.showModal && this.renderModal()}
        </div>
     )
    }
}

编辑：您还可以将整个Modal返回语句导出到其自己的组件中，并在showModal状态为true时有条件地呈现该组件。

const ModalComponent = (props) => {
    return(
        <div className="static-modal">
          <Modal.Dialog>
            <Modal.Header>
              <Modal.Title>Modal title</Modal.Title>
            </Modal.Header>

            <Modal.Body>One fine body...</Modal.Body>

            <Modal.Footer>
              <Button>Close</Button>
              <Button bsStyle="primary">Save changes</Button>
            </Modal.Footer>
          </Modal.Dialog>
        </div>
    )
}

class ParentComponent extends React.Component {
    state = {
        showModal: false
    }

    render(){
        return(
            <div>
                <button onClick={() => this.setState({showModal:true})}>
                    Show Modal
                </button>
                {this.state.showModal && <ModalComponent id='0af141random'/>}
            </div>
        )
    }
}

不会发生onClick渲染

2 个答案: