React - 专注于 DOM 中的“输入”元素（呈现为列表的元素）在按键后消失答案

【问题标题】：React - Focus on an "input" element (rendered as an element of a list) in the DOM vanishes after keypressReact - 专注于 DOM 中的“输入”元素（呈现为列表的元素）在按键后消失
【发布时间】：2019-04-05 07:13:00
【问题描述】：

我希望在按键后保持对“输入”元素的关注

代码：

import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <NewContactBox/>
    )
  }
}
class NewContactBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      email: '',
      phone: '',
    }
    this.fieldRefs = {
      name: React.createRef(),
      email: React.createRef(),
      phone: React.createRef(),
    }
  }
  hc = (ev, type, ref) => {
    this.setState({
      [type]: ev.target.value
    })
    // console.log(ref)
    ref.focus()
  }
  render() {
    const ContactInput = ({fields}) => (
      fields.map((f) => (
        <input
          key={f.id}
          className={`p-1 my-3 w-100 mr-3 ${f.id}`}
          size="16px"
          placeholder={f.placeholder}
          value={this.state[f.id]}
          ref={this.fieldRefs[f.id]}
          onChange={(e) => this.hc(e, f.id, this.fieldRefs[f.id].current)}
        />
      ))
    )
    return (
      <ContactInput
        fields={[
          { placeholder: "Name", id: 'name' },
          { placeholder: "Phone number", id: 'phone' },
          { placeholder: "Email", id: 'email' },
        ]}
      />
    )
  }
}

export default App

我试过了

Change01 - 以另一种方式在 Input 标签内声明 refs
Change02 - 不将 ref 显式传递给 onChange，然后直接从 this.fieldrefs 访问 ref

constructor(props) {
  this.fieldRefs = {} // Change01
}
hc = (ev, type) => { //Change02
  this.setState({
    [type]: ev.target.value
  })
  // console.log(this.fieldRefs[type].current)
  this.fieldRefs[type].current.focus()
}
...
      <input
        ...
        ref={(el) => this.fieldRefs[f.id] = el} //Change01
        onChange={(e) => this.hc(e, f.id)} //Change02
      />

但这并没有帮助，每次按键后，body元素都会成为活动元素。

【问题讨论】：

标签： javascript reactjs dom focus

【解决方案1】：

也许您需要将您的 ContactInput 声明移到您的 render() 之外，否则您将在每次重新渲染时重新创建一个新组件。例如，

  render() {
    return (
      <this.ContactInput
        fields={[
          { placeholder: "Name", id: 'name' },
          { placeholder: "Phone number", id: 'phone' },
          { placeholder: "Email", id: 'email' },
        ]}
      />
    )
  }

  ContactInput = ({fields}) => (
    // If react complains about returning multiple component, add this React.Fragment short syntax
    <React.Fragment>
      {fields.map((f) => (
        <input
          key={f.id}
          className={`p-1 my-3 w-100 mr-3 ${f.id}`}
          size="16px"
          placeholder={f.placeholder}
          value={this.state[f.id]}
          ref={this.fieldRefs[f.id]}
          onChange={(e) => this.hc(e, f.id, this.fieldRefs[f.id].current)}
        />
      ))}
    <React.Fragment/> 
  )

【讨论】：