更新状态时，我失去了对动态创建的 jsx 输入的关注答案

【问题标题】：I'm losing focus on a dynamically created jsx input when the state is updated更新状态时，我失去了对动态创建的 jsx 输入的关注
【发布时间】：2018-02-14 06:58:57
【问题描述】：

我有许多从数组动态生成并绑定到 redux 状态分支的字段。输入值正确映射到状态，然后返回到组件。问题是它失去了焦点，你必须重新点击输入元素。我试图通过自动聚焦最后更新的字段来解决这个问题，但它聚焦在文本的开头，这样你就可以向后写。我正在寻找解决该问题的方法，但它们都需要直接在 dom 上工作或使用“onFocus="this.value=value" 作为 jsx 属性不起作用。

我在这里做错了吗？为什么 react 不会像使用静态 jsx 输入元素那样记住要自动聚焦的字段？

以下是生成字段的代码：

const renderFields = (fields, target) => {
    if(!fields) return <div></div>
    return fields.map(field => {
      let input = []
      if(field.type==="text") {
        input.push(<input key={generateUID()} type="text" onChange={e=>onChange(field, e.target.value, target)} autoFocus={field.hasFocus} value={field.value} />)
      } else if(field.type==="radio") {
        let values = field.control.match(/\[(.+)\]/)[1].split(",")
        input = values.map(value => {
          return (<label key={generateUID()}><input name={field.id} onChange={e=>onChange(field, value, target)} type="radio" value={value} key={generateUID()} style={{display: "inline-block"}} /> {value}</label>)
        })
      }
      return (
        <div key={generateUID()}>
          <label>{field.label}</label>
          <br />
          {input}
        </div>
      )
    })
  }

感谢您的帮助

【问题讨论】：

你可以尝试这样的事情来让onFocus sn-p 在 JSX 中工作：<input ref={ ref => this.input = ref } onFocus={() => this.input.value = field.value} />
您可能想查看this post 了解密钥及其工作原理。

标签： javascript reactjs redux jsx

【解决方案1】：

我认为问题在于 generateUID() 每次调用时都会产生唯一的输出，从而迫使 React 在虚拟 DOM 中重建该字段。一般来说，你不应该随机生成keys。一种可能性是使用输入索引作为候选键：

fields.map(field => {
  ...
  input = values.map((value, inputIdx) => {
     return (
      <label key={generateUID()}>
        <input 
           name={field.id} 
           onChange={e=>onChange(field, value, target)} 
           type="radio" 
           value={value} 
           key={`fieldInput-${inputIdx}`} 
           style={{display: "inline-block"}} /> 
        {value}
      </label>
    )
  })
})

【讨论】：

【解决方案2】：

问题是你正在为你的键生成 UID，所以当 React 重新渲染组件时，它们总是有新的键。尝试使用以其他方式定义的密钥，这将通过重新渲染保持一致。

【讨论】：