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

Question

我有许多从数组动态生成的字段，并绑定到 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>
      )
    })
  }

我很感激任何帮助

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