代码之家 › 专栏 › 技术社区 › NZJames

如何在反应弹出行为中集中HTML中的输入元素

reactjs css

NZJames · 技术社区 · 7 年前

还有第二个问题,我是否可以绑定“回车”键来关闭模式?Escape内置于NPM React模式中,是一个特殊的行为字符,但我希望Enter提交OK按钮。

 <ReactModal 
    isOpen={this.state.dialogOpen}
    contentLabel="Example Modal"
    className="Modal"
    overlayClassName="Overlay"
    shouldCloseOnEsc={true}
    shouldReturnFocusAfterClose={true}
    role="dialog"
    onRequestClose={this.handleCloseModal}
    shouldCloseOnOverlayClick={false}
    // tslint:disable
    parentSelector={() => document.body}
  > 
  <div className="Modal-Container">
      <div style={{flex:0.4}}>
        <div className="Panel-header-left">
          Please enter a reason for rejecting
        </div>
      </div>
      <div style={{flex:0.6}}>
        <input type="textbox" name="ModalInput" value={this.state.comment} onChange={ this.handleCommentChange.bind(this)} />
      </div>
      <div>
        <div className="Panel-header-right">
          <button className="Action-Button" onClick={(e) => this.handleCloseModal()}>Cancel</button>
          <button className="Action-Button" onClick={(e) => this.processRejectComments()}>OK</button>
        </div>
      </div>          
  </div>
  </ReactModal>

单击我的按钮加载模式

private doReject()
  {
    if (this.gridApi.getSelectedNodes().length > 0)
    {
      this.setState({comment: ""});
      this.handleOpenModal();
    }
  }

1 回复 | 直到 7 年前

Rudy Huynh 7 年前

1.聚焦模态输入 <input> input.focus() 在里面 onAfterOpen() react-modal

<ReactModal 
  isOpen={this.state.dialogOpen}
  onAfterOpen={() => this._input.focus()}
>
  <input ref={input => this._input = input}/>
</ReactModal>

,包装 < <form> ,然后在其 onSubmit()

<ReactModal
  isOpen={this.state.dialogOpen}
>
  <form onSubmit={() => this.setState({dialogOpen: false})>
    <input {...} />
  </form>
</ReactModal>

https://codesandbox.io/s/wn18lvjlx7