何时使用inputRef.current而不是this.inputRef React.js?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了何时使用inputRef.current而不是this.inputRef React.js?相关的知识,希望对你有一定的参考价值。

我在两个语法之间感到困惑,以便从反应文档中访问引用...我想知道的是什么时候使用inputRef.current来访问引用而不是this.inputRef in react

答案

当使用React.creatRef()和React 16语法创建引用时,您可以使用引用的当前属性即inputRef.current来访问它。

React.createRef()

class User extends Component{
    constructor(props){
        super();
        this.nameField = React.createRef();
        this.onClick = this.focusOnNameField.bind(this);
        this.state = {
            name : props.name
        };

    }
    focusOnNameField = ()=>{
        this.nameField.current.focus();
    }

    render(){
        return(
            <div>
                <input ref={this.nameField} name="username" value={this.state.name} />
                <button onClick={this.onClick} >Fous on field</button>
            </div>
        )
    }
}

没有React.createRef()

const User = (props)=>{
    let nameField = null;


   const setRefernce = (inputElement)=>{

        this.nameField = inputElement;
    }
    const onClick = (e)=>{
        e.preventDefault();
        this.nameField.focus();
    }



    return(
        <div>
            <form onSubmit={onClick.bind(this)}>
                <input ref={setRefernce} name="username" value={props.name} />
                <button type="submit" >Focus Input</button>
            </form>

        </div>
    );
}
另一答案

正如其他答案所提到的,current ref属性是由React.createRef()创建的,最初在React 16中没有,并且在React 16.3中引入。

通常它是旧语法(React 15,React 16.0到16.2):

<input ref={ref => this.inputRef = ref}/>
...
this.inputRef.focus()

与新语法(React 16.3及更高版本):

inputRef = React.createRef();
...
<input ref={this.inputRef}/>
...
this.inputRef.current.focus()

新语法引入了一个可用的模式,可以在较旧的React版本中使用:

inputRef = { current: null };
...
<input ref={ref => this.inputRef.current = ref}/>
...
this.inputRef.current.focus()

重要的区别是React.createRef()创建了包含唯一属性current的ref对象。这是一种使ref对象引用永久化的模式,即使current属性中的ref正在改变。这样,ref对象可以通过引用传递,即使current最初是null

以前这是一个反模式,主要是因为ref是不稳定的:

const ComponentThatAcceptsRefs = ({ inputRef }) => (
  <button onClick={() => inputRef.focus() }>Focus</button>
);

<input ref={ref => this.inputRef = ref}/>
<ComponentThatAcceptsRefs inputRef={this.inputRef}/>

在这种情况下,当它作为道具传递时,它是未定义的。这需要使inputRef支持一个吸气功能,以使其工作,getInputRef={() => this.inputRef}

虽然ref对象(demo)可以做同样的事情:

const ComponentThatAcceptsRefs = ({ inputRef }) => (
  <button onClick={() => inputRef.current.focus() }>Focus</button>
);

inputRef = React.createRef();
...
<input ref={this.inputRef}/>
<ComponentThatAcceptsRefs inputRef={this.inputRef}/>

在React中可能有更多传统和实用的方法不依赖于refs,但是可以用ref对象来做到这一点。

另一答案

我相信this.ref适用于React 15,当你指定一个像这样的参考时:

ref={(input) => { this.textInput = input; }}

所以你可以使用this.textInput

对于React 16的'current'语法,在构造函数中使用this.textInput = React.createRef()然后像这样赋值:

ref={this.textInput}

所以你然后使用this.textInput.current来访问它。

虽然引用混淆的特定文档/代码的引用可能有助于清除问题。

以上是关于何时使用inputRef.current而不是this.inputRef React.js?的主要内容,如果未能解决你的问题,请参考以下文章

为啥使用片段,以及何时使用片段而不是活动?

何时使用 TestFixtureSetUp 属性而不是默认构造函数?

何时使用 ADOX 而不是 ADCX?

AngularJS:何时使用服务而不是工厂

AngularJS:何时使用服务而不是工厂

何时使用 Malloc 而不是 New [重复]