React 为多个Input组件设置不同defaultValue仅单个生效问题求解

问题原因 #

• 你当前的InputField组件逻辑是把传入的三个prop值拼接后作为输入框默认值，就算只传单个prop，生成的默认值也会带有多余的尾随空格，不符合预期。
• 组件设计冗余，每个实例仅需要一个默认值，不需要拆分三个独立prop。

最优修复方案 #

将组件简化为通用的单默认值prop结构：

1. 修改InputField组件代码：

function InputField({ defaultValue }) {
  return (
    <div className='inputDiv'>
      <input type="text" placeholder='type info' defaultValue={defaultValue ?? ''} />
    </div>
  )
}

2. 修改页面调用代码：

<InputField defaultValue={'name'} />
<InputField defaultValue={'product 6sd4f'} />
<InputField defaultValue={'information 123'} />

不修改调用方式的兼容方案 #

如果你不想调整现有页面的调用逻辑，只需要修改组件内默认值的取值逻辑即可：

function InputField({nameValue, productValue, informationValue}) {
  // 按优先级取存在的prop值作为默认值，不拼接
  const defaultValue = nameValue ?? productValue ?? informationValue ?? ''
  return (
    <div className='inputDiv'>
      <input type="text" placeholder='type info' defaultValue={defaultValue} />
    </div>
  )
}

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