打开多个模式时无法使用Tab浏览表单元素

Question

我无法使用tab浏览表单元素，也无法同时打开多个模式（使用react-modal）时输入。注意，这仅在Chrome和IE中发生，但在野生动物园中可以正常使用

复制步骤：

1. 打开模式1
2. 打开模式2 on单击模式1中的按钮
3. 点击标签按钮
4. 什么都没发生

预期行为：

1. 在标签上，模式2将自动聚焦于下一个输入字段

尝试使用ref，但效果不佳。仅在使用document.getElementById时有效。但是，我了解不建议在功能组件中使用document.getElementById。所以我想知道这个问题是否还有其他解决方法

class CredentialForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      type: formData.type || 'employment',
      name: formData.name || '',
      detail: formData.detail || '',
      startYear: formData.startYear || '',
      endYear: formData.endYear || '',
      isCurrent: formData.isCurrent || false
    }

  handleKeyPress = (value, event) => {
    if (event.keyCode === 13 || event.keyCode === 9) {
      event.preventDefault()
      document.getElementById(value).focus()   **---> getElementById method**
      this[value].focus()   **---> ref method**
    }
  }

  render () {
    const {
      type,
      name,
      detail,
      startYear,
      endYear,
      isCurrent,
      showErrors,
      validationErrors
    } = this.state
    const { formType } = this.props

    return (
      <Container>
        <Label>{type === 'employment' ? 'Company Name' : 'School Name'}</Label>
        <FormControl>
          <Input
            id={'nameInput'}
            ref={(nameInput) => { this.nameInput = nameInput }}
            onKeyDown={(event) => this.handleKeyPress('detailInput', event)}
            isError={showErrors && validationErrors['name']}
            onChange={handleNameChange}
            placeholder={type === 'employment' ? 'Enter Company Name' : 'Enter School Name'}
            value={name}
          />
        </FormControl>
        <Label>{type === 'employment' ? 'Designation' : 'Major'}</Label>
        <FormControl>
          <Input
            id={'detailInput'}
            ref={(detailInput) => { this.detailInput = detailInput }}
            onKeyDown={(event) => this.handleKeyPress('isCurrent', event)}
            isError={showErrors && validationErrors['detail']}
            onChange={handleDetailChange}
            placeholder={type === 'employment' ? 'Enter Designation' : 'Enter Major'}
            value={detail}
          />
        </FormControl>
        <CheckboxField>
          <input
            id={'isCurrent'}
            ref={(isCurrent) => { this.isCurrent = isCurrent }}
            onKeyPress={(event) => this.handleKeyPress('submitBtn', event)}
            type="checkbox"
            checked={isCurrent}
            onChange={this.handleCurrentChange}
          />
          <CheckboxLabel>{type === 'employment' ? 'I currently work here' : 'I currently study here'}</CheckboxLabel>
        </CheckboxField>
        <div style={{display: 'flex'}}>
          <SubmitButton
            style={{width: 'auto', marginTop: '24px'}}
            onClick={this.handleSubmit}
            isLoading={false}>
            Save Details
          </SubmitButton>
        </div>
      </Container>
    )
  }
}

export default CredentialForm