如何通过key而非索引为HTMLCollection子元素设置对应值？

方案1：原生HTMLCollection内置支持（无需额外封装） #

HTMLCollection本身支持通过子元素的id或name属性作为键直接取值，完全符合你期望的调用方式：

• 给子元素设置id或name属性：

<div ref={myRef}>
  <input id="some-key-one" />
  <input id="some-key-two" />
  <input id="some-key-three" />
  <input id="some-key-four" />
</div>

• 直接通过key赋值：

// 两种写法都可以
myRef.current.children.namedItem('some-key-one').value = 'apple'
myRef.current.children['some-key-one'].value = 'apple'

方案2：自定义key映射（支持任意自定义标识） #

如果不想占用id/name属性，可以用自定义data-*属性实现任意key的匹配：

• 给子元素添加自定义标识属性：

<div ref={myRef}>
  <input data-field-key="some key one" />
  <input data-field-key="some key two" />
  <input data-field-key="some key three" />
  <input data-field-key="some key four" />
</div>

• 封装简易的查询方法：

const setChildValueByKey = (parent, key, value) => {
  const target = Array.from(parent.children).find(el => el.dataset.fieldKey === key)
  if (target) target.value = value
}

• 调用方式：

setChildValueByKey(myRef.current, 'some key one', 'apple')
setChildValueByKey(myRef.current, 'some key two', 'orange')

React场景优化建议 #

如果没有必须操作原生DOM的特殊需求，更推荐用React受控组件模式，把输入框的值存在state中管理，不需要操作DOM引用，耦合度更低：

const [formValues, setFormValues] = React.useState({
  'some key one': '',
  'some key two': '',
  'some key three': '',
  'some key four': ''
})

// 赋值直接修改state即可
setFormValues(prev => ({...prev, 'some key one': 'apple'}))

// 渲染时绑定value
<input value={formValues['some key one']} onChange={e => setFormValues(prev => ({...prev, 'some key one': e.target.value}))} />

内容的提问来源于stack exchange，提问作者stacky