I am trying to select all the text in a textarea when a component loads using React v16.3.1
Following the Refs docs I have a basic sample but this.textarea
is always undefined, if I change this sample to execute the same code on a button click it works fine.
So whats going on? I had expected that after mounting the component should be available?
Sample code:
import React from "react";
class Hello extends React.Component {
constructor(props) {
super(props);
this.textarea = React.createRef();
}
componentDidMount = () => {
this.textarea.current.select();
};
render() {
return (
<div>
<textarea
className="form-control"
defaultValue="the quick brown fox."
ref={this.textarea}
/>
</div>
);
}
}
From package.json:
"react": "^16.3.1",
"react-dom": "^16.3.1",
Thanks
So, after the component is rendered correctly, componentDidMount() function is called and that call getData() function.
props is available in the entire class. So your code is OK. You already can, do you mean inside $. getJSON ?..
componentDidMount isn't deprecated and is definitely still safe to use, so there's no need to add UNSAFE_ to that method. The componentWillSomething methods are the ones that seem to be on their way out.
The documentation says:
Note
The examples below have been updated to use the React.createRef() API introduced in React 16.3. If you are using an earlier release of React, we recommend using callback refs instead.
If you are using an earlier release of React, u need use callback refs
class App extends React.Component {
constructor(props) {
super(props);
this.textarea = null;
this.setTextareaRef = element => {
this.textarea = element;
};
}
componentDidMount = () => {
if (this.textarea) this.textarea.select();
};
render() {
return (
<div>
<textarea
className="form-control"
defaultValue="the quick brown fox."
ref={this.setTextareaRef}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
class App extends React.Component {
constructor(props) {
super(props);
this.textarea = React.createRef();
}
componentDidMount = () => {
this.textarea.current.select();
};
render() {
return (
<div>
<textarea
className="form-control"
defaultValue="the quick brown fox."
ref={this.textarea}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With