Reactjs 更改最终形式焦点中焦点元素的顺序

如果提交时存在任何验证错误，我将使用

final form focus

和

react final form

来关注第一个错误。我有一个自定义的

react select

组件，因此我使用了一个自定义的findInput方法，如下所示：

const findInput = (inputs, errors) =>
  inputs.find(input => {
    const name = input.name || input.dataset.name;
    return name && getIn(errors, name);
  });

const getFormInputs = name => () => {
  if (typeof document === "undefined") {
    return [];
  }
  const form = document.forms[name];
  const inputs = form && form.length ? Array.prototype.slice.call(form) : []; // cast cheat to get from HTMLFormElement children to FocusableInput

  // So far this is just copy-pasted from final-form-focus.
  // It would return inputs here, but here is the magic:

  const selectFields = Array.prototype.slice.call(
    document.querySelectorAll("[data-select]")
  );

  const allInputs = inputs.concat(selectFields);

  return allInputs;
};

const focusOnError = focusDecorator(getFormInputs("pay-form"), findInput);

const SelectInput = ({
  input,
  meta,
  initialValue,
  ...rest
}) => {
  const selectRef = React.createRef();

  const setFocus = () => {
    selectRef.current.focus();
  };
  return (
    <div>
      <div
        className="input-wrapper"
        tabIndex="0"
        data-select
        data-name={input.name}
        onFocus={setFocus}
      >
        <Select
          {...rest}
          ref={selectRef}
          onChange={value => input.onChange(value)}
          value={input.value}
          openMenuOnFocus={true}
        />
      </div>
    </div>
  );
};

我的选择组件被包装在一个div中，并使用ref聚焦，如下所示：

const findInput = (inputs, errors) =>
  inputs.find(input => {
    const name = input.name || input.dataset.name;
    return name && getIn(errors, name);
  });

const getFormInputs = name => () => {
  if (typeof document === "undefined") {
    return [];
  }
  const form = document.forms[name];
  const inputs = form && form.length ? Array.prototype.slice.call(form) : []; // cast cheat to get from HTMLFormElement children to FocusableInput

  // So far this is just copy-pasted from final-form-focus.
  // It would return inputs here, but here is the magic:

  const selectFields = Array.prototype.slice.call(
    document.querySelectorAll("[data-select]")
  );

  const allInputs = inputs.concat(selectFields);

  return allInputs;
};

const focusOnError = focusDecorator(getFormInputs("pay-form"), findInput);

const SelectInput = ({
  input,
  meta,
  initialValue,
  ...rest
}) => {
  const selectRef = React.createRef();

  const setFocus = () => {
    selectRef.current.focus();
  };
  return (
    <div>
      <div
        className="input-wrapper"
        tabIndex="0"
        data-select
        data-name={input.name}
        onFocus={setFocus}
      >
        <Select
          {...rest}
          ref={selectRef}
          onChange={value => input.onChange(value)}
          value={input.value}
          openMenuOnFocus={true}
        />
      </div>
    </div>
  );
};

const SelectInput=({
输入，
元，
初始值，
休息
}) => {
const selectRef=React.createRef（）；
const setFocus=（）=>{
选择ref.current.focus（）；
};
返回(
input.onChange（值）}
value={input.value}
openMenuOnFocus={true}
/>
);
};

---

但select只集中在行的末尾，在所有其他组件之后。这是我的名片。有没有办法以与文档中显示的相同的方式更改聚焦元素的顺序？

看起来没有办法通过React Select在

上设置

name

属性，但是您可以通过

innerId

设置

id