Current всегда имеет значение null при использовании React.createRef
Я пытался сделать это.
Должно быть, мне что-то не хватает, но я не понимаю, почему в этом примере current всегда является null.
class App extends React.PureComponent {
constructor(props) {
super(props);
this.test = React.createRef();
}
render() {
return <div className = "App">current value : {this.test.current + ""}</div>;
}
}
Вы можете проверить мой тестовый пример здесь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Вам не хватает опоры ref = {this.test}.
return (
<div className = "App" ref = {this.test}>
current value : {this.test.current + ""}
</div>
);
Потому что вы забыли присвоить ссылку какому-то элементу dom. Вы только создаете это.
Напишите это так:
class App extends React.PureComponent {
constructor(props) {
super(props);
this.test = React.createRef();
}
handleClick = () => alert(this.test.current.value)
render() {
return (
<div className = "App">
<input ref = {this.test} />
<button onClick = {this.handleClick}>Get Value</button>
</div>
)
}
}
React.createRef () является асинхронным, поэтому, если вы попытаетесь получить доступ к ссылке в componentDidMount, он вернет значение null, а позже вернет свойства компонента, на который вы ссылаетесь.
componentDidMount(): void {
if (this.viewShot && this.viewShot.current) {
this.viewShot.current.capture().then((uri) => {
console.info('do something with ', uri);
});
}
}
Это правильный способ использования React.createRef () в этом контексте.
Вы совершенно не правы! React обновляет все DOM и ссылки до срабатывания componentDidMount. Что такое метод захвата? Он не существует ни для «текущего» элемента в качестве экземпляра ссылки, ни для элемента ввода. Я просто не могу понять, почему так много положительных отзывов. PS: Принятый ответ правильный!
Я знаю, что это не решение проблемы OP, но для тех, кто пришел из поиска Google, один из способов, которым ref.current может быть нулевым, заключается в том, что если компонент, к которому прикрепляется ссылка, является подключенным компонентом. Как с react-redux connect или withRouter. Для response-redux решением является передача forwardRef: true в четвертом варианте подключения.
<div ref = {this.test}>
Вы должны назначить опору ref вашему элементу DOM.
В этом случае вам нужно присвоить ref элементу div
Что этот ответ добавляет к выбранному ответу?
Это может произойти в следующих случаях:
- Вы забыли передать свой ссылка компоненту, то есть
this.testиз вопроса.
<Component ref = {this.test} />
- Вы используете Redux, в котором компонент, которому передаются реквизиты ссылка, обернут методом
connect, и, следовательно,this.test.currentвернет ноль, поскольку он указывает на оболочку Redux, чтобы этот вид компонента работал, чтобыforwardRef: true
i.e:
connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})(Component)
- Если вы используете
withRouterиconnectвместе, то вместо один здесь у вас будет дваобертки, иthis.test.current, очевидно, вернет ноль, чтобы преодолеть это, убедитесь, чтоwithRouterобертываетconnect
withRouter(connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})(Component))
а потом
<Component wrappedComponentRef = {ref => this.test = ref} />
wrappedComponentRef - это опора, используемая для того, чтобы сделать обернутый компонент доступным так же, как forwardRef: true, вы можете найти его в документации здесь
Я понимаю, что на это был дан ответ некоторое время назад, но в приведенном вами рабочем примере указано «текущее значение: null». Разве это не должно иметь значение?