在多个输入上反应分割字符串

Question

我有四个input字段用于16位数的凭证代码（xxxx xxxx xxxx xxxx）

可以单独手动输入字段中的代码，但我也希望人们只需复制/粘贴代码，这样就会自动填写所有输入字段。

我已经阅读了一些解决方案，但没有一个是React具体的

输入是从Object

动态加载的

render() {
  return this.fieldNames.map((fieldName, index) => (
    <div className="col-md-3">
      <input
        className="voucher-field"
        maxLength="4"
        onChange={this.onChange}
        ref={(item) => { this.fields[fieldName] = item; }}
      />
    </div>
  ));
}

function onChange() {
  const { value } = event.target;
  console.log(value);
}

我认为粘贴时会触发onChange()函数，但是当我这样做时，记录的值只有4个字符长（最大限制输入）。

如何将复制的字符串划分为输入？