Когда использовать inputRef.current вместо this.inputRef React.js?

Question

Я озадачен между двумя синтаксисами для доступа к ссылкам из реактивной документации ... Все, что я хочу знать, - это когда использовать inputRef.current для доступа к ссылке вместо this.inputRef в реаги

Answer 1

Я полагаю, this.ref для Реакта 15, когда вы присваиваете ссылку следующим образом:

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

, поэтому вы можете использовать this.textInput.

Для «текущего» синтаксиса React 16, используя this.textInput = React.createRef() в конструкторе, а затем присваивая так:

ref={this.textInput}

поэтому вы затем используете this.textInput.current для доступа к нему.

Хотя ссылка на конкретную документацию / код, приводящий к путанице, может помочь прояснить ситуацию.

Answer 2

Как уже упоминалось в других ответах, свойство current ref создается React.createRef(), которое изначально не было доступно в React 16 и было введено в React 16.3.

Обычно это старый синтаксис (Реакт 15, Реакт 16.0 до 16.2): ​​

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

против. новый синтаксис (Реакт 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() создает объект ref, содержащий единственное свойство, current. Это шаблон для сохранения постоянной ссылки на объект ref, даже если ссылка в свойстве current изменяется. Таким образом, ссылка на объект может быть передана по ссылке, даже если current изначально null.

Ранее это был антипаттерн, в первую очередь потому, что ссылка изменчива:

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 могут быть более традиционные и практичные способы, не основанные на ссылках, но это возможно сделать с помощью объекта ref.

Answer 3

Когда ссылка создается с использованием 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>
    );
}