Reactjs: Как получить доступ к динамически отображаемым элементам массива по индексу или по ключевой ссылке? - PullRequest
Новая
       42

Reactjs: Как получить доступ к динамически отображаемым элементам массива по индексу или по ключевой ссылке?

0 голосов
/ 13 мая 2019

У меня есть 5 полей ввода, представленных из массива, когда я нажимаю на значок плюса.Теперь, после того как я нажал на этот значок, я хочу сфокусироваться на первом из полей ввода.Как бы я это понял?Моя идея была либо с ссылками, но я не знаю, как назначить ссылку только на первое поле ввода.Или моя вторая идея заключалась в том, что я могу получить доступ к полю ввода с помощью ключа или индекса каким-либо образом.Но я не знаю, как получить ключ или свойство индекса в поле ввода, потому что эти свойства нигде не отображаются.Они также не доступны, если у меня есть ссылка на текущее поле ввода.

actualState.inputFields.map((val,index) => (   
                        <ListElemErrorBoundary key={index}>                   
                            <InputElement  ref={focusInputOnClick}                          
                            key={index} elemValue = {val} name={"input" +  index} onChangeListener={(event) => handleDoublettenIDs(event,index)} />
                        </ListElemErrorBoundary>  
                        )
                    )

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Есть много разных способов добиться этого, но здесь возможны реализации каждой из двух предложенных вами идей.

Передача ссылки только на первый InputElement: 

actualState.inputFields.map((val,index) => (   
                        <ListElemErrorBoundary key={index}>                   
                            <InputElement  ref={(index == 0)?focusInputOnClick:null}                          
                            key={index} elemValue = {val} name={"input" +  index} onChangeListener={(event) => handleDoublettenIDs(event,index)} />
                        </ListElemErrorBoundary>  
                        )
                    )

Отслеживание различных входных элементов: 

actualState.inputFields.map((val, index) => {
    inputComponent = React.createElement(InputElement, {
        ref: focusInputOnClick,
        key: index,
        elemValue: val,
        name: "input" + str(index),
        onChangeListener: (event) => handleDoublettenIDs(event,index)
    });
    this.inputComponents.push(inputComponent)
    return (<ListElemErrorBoundary key = {index}> 
                 {inputComponent} 
            </ListElemErrorBoundary>)
})

Если вам нужно сфокусировать только первый элемент и ничего более, первый подход может быть лучшей идеей, поскольку нет необходимости отслеживать все элементы InputElements.

0 голосов
/ 13 мая 2019

Вы можете использовать функцию ссылки просто для фокусировки: 

const InputRow = ({ forwardRef }) => (
  <li><input ref={forwardRef} /><input /></li>
)

class App extends React.Component {
  state = {
    inputs: []
  }
 
  handleRef = ref => {
    ref.focus();
  }
  
  handleAdd = () => {
    this.setState(prevState => (
      { inputs: [...prevState.inputs, 'newInput'] }
    ))
  }
  
  render(){
    const { inputs } = this.state;
    return (
      <div>
        <ul>
          {inputs.map(input => <InputRow forwardRef={this.handleRef} />)}
        </ul>
        <button onClick={this.handleAdd}>Add</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...