Почему не получается присвоить ref DOM-элементу?

Question

[ubbe_lodbroke]

class Prompt extends Component {
constructor(props){
super(props)
this.input = React.createRef()
this.state = {
value: this.props.value
}
}

componentDidMount(){
console.log(this.input.current); // null
}

onChange = e => this.setState({ value: e.target.value.trim() });

isValid = () => this.props.value !== this.state.value;

onSave = e => {
e.preventDefault();
if (!this.isValid()) {
return;
}
this.props.onOk(this.state.value);
};

render() {
return (
visible={true}
maskClosable={false}
closable={false}
footer={[
key="submit"
disabled={!this.isValid()}
type="primary"
onClick={this.onSave}
>
{this.props.okText}
,

{this.props.cancelText}

]}
>

{this.props.text}

type="text"
ref={this.input}
onChange={this.onChange}
placeholder={this.props.placeHolder}
/>



);
}
}

Не получается присвоить this.input компоненту . При обращении к this.current возвращает null. Это моя ошибка или дело в библиотеке из которой я беру ?

Answer 1

[t800zippygod]

Доброго времени суток. Когда реф передаётся элементу в методе render, ссылка на данный узел доступна через свойство рефа current. -- это текст с официальной страницы React (https://ru.reactjs.org/docs/refs-and-the-dom.html)
При вызове из других методов this.input.current еще не определен и возвращает null