如何处理循环中的引用? [英] How to deal with a ref within a loop?

问题描述

下面是我的父组件，其中包含来自循环的多个输入.如何选择一个 input 来聚焦?在这种情况下，我是否必须创建动态 ref?

class TestRef 扩展 React.Component {ref = React.createRef();状态 = {数据: [{名称:abc"},{名称:定义"}]};焦点输入 = () =>this.ref.current.focus();使成为() {返回 (<div>{this.state.data.map(o => {return <Hello placeholder={o.name} ref={this.ref}/>;})}<button onClick={this.focusInput}>焦点输入1</button><button onClick={this.focusInput}>焦点输入2</button>

);}}

解决方案

您可以使用 callback refs 生成并存储每个输入的动态 ref 到一个数组中.现在您可以使用 ref 的索引来引用它们:

const Hello = React.forwardRef((props, ref) => );class Button 扩展 React.Component {onClick = () =>this.props.onClick(this.props.id);使成为() {返回 (<button onClick={this.onClick}>{this.props.children}</button>);}}类 TestRef 扩展了 React.Component {状态 = {数据: [{名称:abc"},{名称:定义"}]};inputRefs = [];setRef = (ref) =>{this.inputRefs.push(ref);};focusInput = (id) =>this.inputRefs[id].focus();使成为() {返回 (<div>{this.state.data.map(({ name }) => (<你好占位符={名称}ref={this.setRef}键={名称}/>))}<Button onClick={this.focusInput} id={0}>焦点输入1</Button><Button onClick={this.focusInput} id={1}>焦点输入2</Button>

);}}ReactDOM.render(, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="root"></div>

Below is my parent component with multiple inputs from a loop. How can I choose one input to focus? Do I have to create a dynamic ref in this case?

class TestRef extends React.Component {
  ref = React.createRef();
  state = {
    data: [
      {
        name: "abc"
      },
      { name: "def" }
    ]
  };
  focusInput = () => this.ref.current.focus();
  render() {
    return (
      <div>
        {this.state.data.map(o => {
          return <Hello placeholder={o.name} ref={this.ref} />;
        })}
        <button onClick={this.focusInput}>focus input 1</button>
        <button onClick={this.focusInput}>focus input 2</button>
      </div>
    );
  }
}

解决方案

You can use callback refs to generate and store the dynamic ref of each input in an array. Now you can refer to them using the index of the ref:

const Hello = React.forwardRef((props,  ref) => <input ref={ref} />);

class Button extends React.Component {
  onClick = () => this.props.onClick(this.props.id);

  render() {
    return (
      <button onClick={this.onClick}>{this.props.children}</button>
    );
  }
}

class TestRef extends React.Component {
  state = {
    data: [
      {
        name: "abc"
      },
      { name: "def" }
    ]
  };
  
  inputRefs = [];
  
  setRef = (ref) => {
    this.inputRefs.push(ref);
  };
  
  focusInput = (id) => this.inputRefs[id].focus();
  
  render() {
    return (
      <div>
        {this.state.data.map(({ name }) => (
          <Hello 
            placeholder={name} 
            ref={this.setRef} 
            key={name} />
        ))}
        <Button onClick={this.focusInput} id={0}>focus input 1</Button>
        <Button onClick={this.focusInput} id={1}>focus input 2</Button>
      </div>
    );
  }
}

ReactDOM.render(<TestRef />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

这篇关于如何处理循环中的引用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！