React ref binding results in: TypeError: Cannot read property 'focus' of null
I am able to copy the example in the React docs to create a ref and then target it on Code Sandbox, but for some reason I can't replicate it in a local project. I'm using react 16.6.3 which is the latest version.
TypeError: Cannot read property 'focus' of null
SelectDonation.save_donation_amount
src/components/SelectDonation.js:19
16 | save_donation_amount () {
17 |
18 | // testing refs
> 19 | this.customDonationInput.current.focus();
| ^ 20 |
21 | // prevent pageload
22 | // grab the custom amount
Here is my component:
import React from "react";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";
export default class SelectDonation extends React.Component {
constructor(props) {
super(props);
this.customDonationInput = React.createRef();
this.save_donation_amount = this.save_donation_amount.bind(this);
}
save_donation_amount () {
this.customDonationInput.current.focus();
};
render() {
return (
<Form>
<Form.Input
type='number'
placeholder='Custom Amount'
name='donation_amount'
id='custom_amount'
ref={this.customDonationInput}
// value={store.donation_amount}
defaultValue={store.donation_amount}
/>
<Button
primary
onClick={
this.save_donation_amount
}>Next Step
</Button>
</Form>
)
}
}
From the error it seems the .current property isn't there. What could be the cause of this?
reactjs semantic-ui-react
edited Nov 26 '18 at 19:21
Alexander Fedyashov
2,55311031
asked Nov 21 '18 at 21:10
Sean DezoysaSean Dezoysa
176113
add a comment |
I am able to copy the example in the React docs to create a ref and then target it on Code Sandbox, but for some reason I can't replicate it in a local project. I'm using react 16.6.3 which is the latest version.
TypeError: Cannot read property 'focus' of null
SelectDonation.save_donation_amount
src/components/SelectDonation.js:19
16 | save_donation_amount () {
17 |
18 | // testing refs
> 19 | this.customDonationInput.current.focus();
| ^ 20 |
21 | // prevent pageload
22 | // grab the custom amount
Here is my component:
import React from "react";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";
export default class SelectDonation extends React.Component {
constructor(props) {
super(props);
this.customDonationInput = React.createRef();
this.save_donation_amount = this.save_donation_amount.bind(this);
}
save_donation_amount () {
this.customDonationInput.current.focus();
};
render() {
return (
<Form>
<Form.Input
type='number'
placeholder='Custom Amount'
name='donation_amount'
id='custom_amount'
ref={this.customDonationInput}
// value={store.donation_amount}
defaultValue={store.donation_amount}
/>
<Button
primary
onClick={
this.save_donation_amount
}>Next Step
</Button>
</Form>
)
}
}
From the error it seems the .current property isn't there. What could be the cause of this?
reactjs semantic-ui-react
edited Nov 26 '18 at 19:21
Alexander Fedyashov
2,55311031
asked Nov 21 '18 at 21:10
Sean DezoysaSean Dezoysa
176113
do you get this in browser, in unit test or maybe SSR?
– skyboyer
Nov 21 '18 at 21:14
In browser, specifically Chrome Version 70.0.3538.77
– Sean Dezoysa
Nov 21 '18 at 21:18
add a comment |
I am able to copy the example in the React docs to create a ref and then target it on Code Sandbox, but for some reason I can't replicate it in a local project. I'm using react 16.6.3 which is the latest version.
TypeError: Cannot read property 'focus' of null
SelectDonation.save_donation_amount
src/components/SelectDonation.js:19
16 | save_donation_amount () {
17 |
18 | // testing refs
> 19 | this.customDonationInput.current.focus();
| ^ 20 |
21 | // prevent pageload
22 | // grab the custom amount
Here is my component:
import React from "react";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";
export default class SelectDonation extends React.Component {
constructor(props) {
super(props);
this.customDonationInput = React.createRef();
this.save_donation_amount = this.save_donation_amount.bind(this);
}
save_donation_amount () {
this.customDonationInput.current.focus();
};
render() {
return (
<Form>
<Form.Input
type='number'
placeholder='Custom Amount'
name='donation_amount'
id='custom_amount'
ref={this.customDonationInput}
// value={store.donation_amount}
defaultValue={store.donation_amount}
/>
<Button
primary
onClick={
this.save_donation_amount
}>Next Step
</Button>
</Form>
)
}
}
From the error it seems the .current property isn't there. What could be the cause of this?
reactjs semantic-ui-react
edited Nov 26 '18 at 19:21
Alexander Fedyashov
2,55311031
asked Nov 21 '18 at 21:10
Sean DezoysaSean Dezoysa
176113
I am able to copy the example in the React docs to create a ref and then target it on Code Sandbox, but for some reason I can't replicate it in a local project. I'm using react 16.6.3 which is the latest version.
TypeError: Cannot read property 'focus' of null
SelectDonation.save_donation_amount
src/components/SelectDonation.js:19
16 | save_donation_amount () {
17 |
18 | // testing refs
> 19 | this.customDonationInput.current.focus();
| ^ 20 |
21 | // prevent pageload
22 | // grab the custom amount
Here is my component:
import React from "react";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";
export default class SelectDonation extends React.Component {
constructor(props) {
super(props);
this.customDonationInput = React.createRef();
this.save_donation_amount = this.save_donation_amount.bind(this);
}
save_donation_amount () {
this.customDonationInput.current.focus();
};
render() {
return (
<Form>
<Form.Input
type='number'
placeholder='Custom Amount'
name='donation_amount'
id='custom_amount'
ref={this.customDonationInput}
// value={store.donation_amount}
defaultValue={store.donation_amount}
/>
<Button
primary
onClick={
this.save_donation_amount
}>Next Step
</Button>
</Form>
)
}
}
From the error it seems the .current property isn't there. What could be the cause of this?
reactjs semantic-ui-react
reactjs semantic-ui-react
edited Nov 26 '18 at 19:21
Alexander Fedyashov
2,55311031
asked Nov 21 '18 at 21:10
Sean DezoysaSean Dezoysa
176113
edited Nov 26 '18 at 19:21
Alexander Fedyashov
2,55311031
asked Nov 21 '18 at 21:10
Sean DezoysaSean Dezoysa
176113
edited Nov 26 '18 at 19:21
Alexander Fedyashov
2,55311031
edited Nov 26 '18 at 19:21
Alexander Fedyashov
2,55311031
edited Nov 26 '18 at 19:21
Alexander Fedyashov
2,55311031
2,55311031
asked Nov 21 '18 at 21:10
Sean DezoysaSean Dezoysa
176113
asked Nov 21 '18 at 21:10
Sean DezoysaSean Dezoysa
176113
asked Nov 21 '18 at 21:10
Sean DezoysaSean Dezoysa
176113
176113
do you get this in browser, in unit test or maybe SSR?
– skyboyer
Nov 21 '18 at 21:14
In browser, specifically Chrome Version 70.0.3538.77
– Sean Dezoysa
Nov 21 '18 at 21:18
add a comment |
do you get this in browser, in unit test or maybe SSR?
– skyboyer
Nov 21 '18 at 21:14
In browser, specifically Chrome Version 70.0.3538.77
– Sean Dezoysa
Nov 21 '18 at 21:18
do you get this in browser, in unit test or maybe SSR?
– skyboyer
Nov 21 '18 at 21:14
do you get this in browser, in unit test or maybe SSR?
– skyboyer
Nov 21 '18 at 21:14
In browser, specifically Chrome Version 70.0.3538.77
– Sean Dezoysa
Nov 21 '18 at 21:18
In browser, specifically Chrome Version 70.0.3538.77
– Sean Dezoysa
Nov 21 '18 at 21:18
add a comment |
1 Answer
1
active
oldest
votes
The error is caused because Semantic UI React's <Form.Input> is a functional component and thus can not receive refs. Changing the element to a regular <input> fixed the issue
answered Nov 23 '18 at 18:42
Sean DezoysaSean Dezoysa
176113
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420516%2freact-ref-binding-results-in-typeerror-cannot-read-property-focus-of-null%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The error is caused because Semantic UI React's <Form.Input> is a functional component and thus can not receive refs. Changing the element to a regular <input> fixed the issue
answered Nov 23 '18 at 18:42
Sean DezoysaSean Dezoysa
176113
add a comment |
The error is caused because Semantic UI React's <Form.Input> is a functional component and thus can not receive refs. Changing the element to a regular <input> fixed the issue
answered Nov 23 '18 at 18:42
Sean DezoysaSean Dezoysa
176113
add a comment |
The error is caused because Semantic UI React's <Form.Input> is a functional component and thus can not receive refs. Changing the element to a regular <input> fixed the issue
answered Nov 23 '18 at 18:42
Sean DezoysaSean Dezoysa
176113
The error is caused because Semantic UI React's <Form.Input> is a functional component and thus can not receive refs. Changing the element to a regular <input> fixed the issue
answered Nov 23 '18 at 18:42
Sean DezoysaSean Dezoysa
176113
answered Nov 23 '18 at 18:42
Sean DezoysaSean Dezoysa
176113
answered Nov 23 '18 at 18:42
Sean DezoysaSean Dezoysa
176113
answered Nov 23 '18 at 18:42
Sean DezoysaSean Dezoysa
176113
176113
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420516%2freact-ref-binding-results-in-typeerror-cannot-read-property-focus-of-null%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
do you get this in browser, in unit test or maybe SSR?
– skyboyer
Nov 21 '18 at 21:14
In browser, specifically Chrome Version 70.0.3538.77
– Sean Dezoysa
Nov 21 '18 at 21:18