首页 文章

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

提问于
浏览 次
0

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

          {input}
        </div>
      )
    })
  }

我感谢任何帮助

javascript reactjs redux jsx

2 回答

  • 1

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

    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>
    )
  })
})
    回复于
  • 3

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

    回复于

相关问题