Как сфокусироваться на поле ввода в ReactJS, когда в компоненте несколько входов?

Question

Я работаю над приложением ReactJS. У меня есть компонент, который генерирует таблицу HTML. Используя Map, дочерний компонент используется для генерации строк для таблицы. Каждая строка содержит определенное количество полей ввода.

При редактировании поля ввода в определенных обстоятельствах модальное окно запускается в родительском компоненте. Модал дает пользователю выбор из трех кнопок, на которые можно нажать. Когда нажимается определенная кнопка в модале, я хочу, чтобы фокус вернулся в поле ввода, которое редактировал пользователь.

Может кто-нибудь дать мне несколько советов о том, как этого добиться, пожалуйста?

Я посмотрел на использование ссылок, но все примеры, которые я видел, продемонстрировали это с компонентом, который имел один вход. Поскольку модальный режим запускается из родительского компонента, я изо всех сил пытаюсь понять, как я могу использовать / получить ссылку от дочернего компонента.

Цените любую помощь.

Answer 1

Я хочу, чтобы фокус вернулся в поле ввода, которое редактировал пользователь.

У вас есть несколько полей ввода, и вы хотите сфокусироваться на определенном входе. Чтобы сделать это, вам нужно несколько ссылок - 12 ссылок в вашем случае -.

1. Определите свой реф как:

   const inputRef = useRef([]);
   

2. Вам необходимо назначить входные узлы для массива ref. Если вы используете какой-то тип l oop для генерации полей ввода, вы можете сделать это следующим образом:

   <input ref={el => inputRef.current[i] = el} />
   

3. Теперь вам нужна переменная для хранения индекса ввод, который в данный момент редактируется.

4. Наконец, вы можете использовать эту переменную, которая содержит индекс последнего отредактированного поля ввода, для достижения того, что вы хотите, как это:

   inputRef.current[i].focus()
   

---

Если вы используете компоненты класса:

1. В вашем конструкторе определите массив:

   this.myRefs = []
   

2. Назначьте HTML узлы, подобные этим:

   <input ref={el => this.myRefs[i] = el} />
   

3. Этот шаг не изменится.

4. Теперь вы можете сосредоточиться конкретный элемент ввода, как это:

   this.myRefs[i].focus()
   

Answer 2

Используя ответ @ user9408899 в качестве руководства и читая, я придумал следующее решение (показаны только те части кода, которые имеют непосредственное отношение к решению).

Родительский компонент

• Реализовано свойство inputRefToFocus для хранения ссылки, к которой мы хотим добавить фокус.
• Реализовано setInputRefToFocus(ref) для назначения указанного выше свойства в состоянии, также передано это и inputRefToFocus дочернему компоненту .

    export class Parent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          ...
          // this is the ref for the input field to focus on
          // when modal window appears, depending on button clicked,
          // we want to focus on the field user was editing
          inputRefToFocus: null
        };

        this.setInputRefToFocus = this.setInputRefToFocus.bind(this);
      }

      setInputRefToFocus(ref) {
        this.setState({ inputRefToFocus: ref });
      }

      render() {
        { rows.map(elem => (
          <PivotTableRow
            setInputRefToFocus={this.setInputRefToFocus}
            inputRefToFocus={this.state.inputRefToFocus}
          />
        )) }
      }
    }

Дочерний компонент

• При создании элементов ввода каждый из них добавляется в массив ссылок.

• Когда ввод фокусируется, мы устанавливаем его ссылку в свойстве inputRefToFocus родительского компонента.

• Установите фокус в componentDidUpdate()

export class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...
    };

    this.inputRef = [];

  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      if (this.inputRef[this.props.inputRefToFocus] !== undefined) {
        this.inputRef[this.props.inputRefToFocus].focus();
      }
    }
  }

  render() {
    return (
      // loop to generate input elements
      <Input
        ref={el => { this.inputRef[dummyvalue] = el; }
        onChange={...}
        onFocus={() => this.props.setInputRefToFocus(dummyvalue)}
      /> 
    );
  }
}

Мне кажется, что код можно значительно улучшить, так как это был мой первый удар по нему