Javascript I'；当状态更新时，我会失去对动态创建的jsx输入的关注

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

这里有什么地方我做错了吗？为什么不像静态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>
      )
    })
  }

const renderFields=（字段，目标）=>{
如果（！字段）返回
返回字段。映射（字段=>{
让输入=[]
如果（字段类型==“文本”）{
input.push（onChange（field，e.target.value，target）}autoFocus={field.hasFocus}value={field.value}/>）
}else if（字段类型==“收音机”）{
让值=field.control.match（/\[（.+）\]/）[1]。拆分（“，”）
输入=值。映射（值=>{
return（onChange（field，value，target）}type=“radio”value={value}key={generateUID（）}style={{{display:“内联块”}}/>{value}）
})
}
返回(
{field.label}


{input}
)
})
}

---

我非常感谢您提供的帮助。问题是您正在为密钥生成UID，因此当React重新呈现组件时，它们总是有新的密钥。尝试使用以其他方式定义的密钥，这将通过重新呈现保持一致。

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

我认为问题在于

generateUID（）

每次调用时都会产生唯一的输出，迫使React在虚拟DOM中重建该字段。一般来说，您不应该随机生成

键

s。一种可能性是使用输入索引作为候选键：

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>
    )
  })
})

fields.map（field=>{
...
输入=值。映射（（值，inputIdx）=>{
返回(
onChange（字段、值、目标）}
type=“无线电”
value={value}
key={`fieldInput-${inputIdx}`}
style={{display:“内联块”}}/>
{value}
)
})
})

我认为问题在于，

generateUID（）

每次调用时都会产生唯一的输出，迫使React在虚拟DOM中重建该字段。一般来说，您不应该随机生成

键

s。一种可能是使用输入索引作为候选键：

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>
    )
  })
})

fields.map（field=>{
...
输入=值。映射（（值，inputIdx）=>{
返回(
onChange（字段、值、目标）}
type=“无线电”
value={value}
key={`fieldInput-${inputIdx}`}
style={{display:“内联块”}}/>
{value}
)
})
})

您可以尝试这样的操作，以使

onFocus

片段在JSX中工作：

this.input=ref}onFocus={（）=>this.input.value=field.value}/>

您可能希望检查有关键及其工作方式的信息。您可以尝试类似这样的操作以使

onFocus

代码段在JSX中工作：

this.input=ref}onFocus={（）=>this.input.value=field.value}/>

您可能希望检查有关键及其工作方式的信息。