Установить фокус на динамически генерируемые компоненты, используя ссылки - PullRequest
Новая
       18

Установить фокус на динамически генерируемые компоненты, используя ссылки

0 голосов
/ 21 декабря 2018

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

В настоящее время я рендерирую элементы: 

const countRow = denom => {
  this[`${denom.id}-ref`] = React.createRef();
  return (
    <CountRow
    ref={this[`${denom.id}-ref`]}
    id={`${denom.name.singular.toLowerCase()}-${denom.id}`}
    tenderValue={denom.value}
    label={denom.denomination.label}
    onChange={(e, value) => this.handleBillsOnChange(e, denom)}
    onEnter={() => this.onEnter(denom)}
  />
}

{itterableArray.map(item => countRow(item)}

В моем onEnterFunction я пытаюсь перейти от одного <CountRow /> к следующему.

В конце этой функции: 

onEnter = denom => {
  //some stuff that doesn't matter
  this[`${denom.id}-ref`].focus()
}

Последняя строкафункции onEnter всегда взрывается.Говоря:
TypeError: _this["".concat(...)].focus is not a function

Может ли кто-нибудь дать рекомендации относительно того, что мне нужно сделать, чтобы выбрать фокус определенного <CountRow />?

1 Ответ

0 голосов
/ 21 декабря 2018

Пример 

const countRow = denom => {
    let ref=React.createRef();
    let onEnter = () => {
        ref.current.focus();
    }
    //setTimeout(onEnter,3000)
    return (
        <CountRow
            ref={ref}
            //   id={`${denom.name.singular.toLowerCase()}-${denom.id}`}
            //   tenderValue={denom.value}
            //   label={denom.denomination.label}
            //   onChange={(e, value) => this.handleBillsOnChange(e, denom)}
            onEnter={onEnter}
        />)
};

class CountRow extends React.Component {
    constructor(props) {
        super(props);
        this.myRef=React.createRef();
        this.focus=()=>this.myRef.current.focus(); 
    }
    render() {
        return <input type="text" ref={this.myRef}/>
    }
}
...