react-simple-keyboard多输入框赋值问题：如何按激活框区分输入？

问题本质 #

你当前的问题是所有输入框共用了同一套键盘输入状态，导致按键内容会同步填充到所有输入框里，和onInit属性关系不大，核心是没给键盘指定当前要输入的目标输入框。

具体修复步骤 #

• 给三个输入框分别设置唯一标识ID，比如input1、input2、input3。
• 在组件中新增两个状态：
  • activeInputId：记录当前选中的输入框ID，初始值设为第一个输入框的ID（比如input1）。
  • inputValues：用对象存储每个输入框的内容，初始值为{input1: '', input2: '', input3: ''}。
• 给每个输入框添加点击事件，点击时更新activeInputId为当前输入框的ID，同时设置输入框为只读（禁止用户直接输入）：

  <input
    id="input1"
    value={inputValues.input1}
    onClick={() => setActiveInputId('input1')}
    readOnly
  />
  

• 修改Keyboard组件的onKeyPress方法，只更新当前激活输入框的内容：

  const onKeyPress = (button) => {
    const newInputValues = {...inputValues};
    if (button === '{backspace}') {
      newInputValues[activeInputId] = newInputValues[activeInputId].slice(0, -1);
    } else {
      newInputValues[activeInputId] += button;
    }
    setInputValues(newInputValues);
  };
  

• 最后让Keyboard组件的input属性绑定当前激活输入框的内容：

  <Keyboard
    input={inputValues[activeInputId]}
    onKeyPress={onKeyPress}
  />
  

这样修改后，点击哪个输入框，键盘输入的内容就只会填充到该输入框中，不会再出现所有输入框同步内容的问题。

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