Question

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

我感谢任何帮助

Answer 1

我认为问题是generateUID()每次调用时都会产生唯一的输出，迫使React重建虚拟DOM中的那个字段。一般来说，您不应随机生成key 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>
    )
  })
})

Answer 2

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

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

2 个答案: