Using a Stateless Functional Component to control input values?
I have the following question: suppose I have an input that only accepts a specific type of input, like numbers with only two decimal positions. I was thinking about controlling this in a SFC which wraps the input controller and contains this logic in it so that I don't have to have a handler in every component that uses it. However, I'm finding it hard to control it without (precisely) keeping a state. I'm wondering if my approach is correct.
This is what the SFC would look like:
import React from 'react';
import PropTypes from 'prop-types';
const DecimalNumbersInput = (props) => {
const onChange = (event) => {
// Should I do this?
if (event.currentTarget.value ...) { // checks if it's a decimal number and if it has only two decimal numbers
props.onChange(event.currentTarget.value);
} else {
// Prevents this?
}
}
return (
<input
disabled={props.disabled}
onChange={(event) => {
onChange(event)
}}
/>
);
}
DecimalNumbersInput.propTypes = {
disabled: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
};
export default DecimalNumbersInput;
So the idea is that it would show some sort of error if the number is invalid, otherwise bubble the change to the parent component, which would keep state for the input value.
What do you think?
javascript reactjs
asked Dec 27 at 13:33
Heathcliff
94631128
add a comment |
I have the following question: suppose I have an input that only accepts a specific type of input, like numbers with only two decimal positions. I was thinking about controlling this in a SFC which wraps the input controller and contains this logic in it so that I don't have to have a handler in every component that uses it. However, I'm finding it hard to control it without (precisely) keeping a state. I'm wondering if my approach is correct.
This is what the SFC would look like:
import React from 'react';
import PropTypes from 'prop-types';
const DecimalNumbersInput = (props) => {
const onChange = (event) => {
// Should I do this?
if (event.currentTarget.value ...) { // checks if it's a decimal number and if it has only two decimal numbers
props.onChange(event.currentTarget.value);
} else {
// Prevents this?
}
}
return (
<input
disabled={props.disabled}
onChange={(event) => {
onChange(event)
}}
/>
);
}
DecimalNumbersInput.propTypes = {
disabled: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
};
export default DecimalNumbersInput;
So the idea is that it would show some sort of error if the number is invalid, otherwise bubble the change to the parent component, which would keep state for the input value.
What do you think?
javascript reactjs
asked Dec 27 at 13:33
Heathcliff
94631128
1
Your approach looks fine. I didn't understand this partI'm finding it hard to control it without (precisely) keeping a state
– Murli Prajapati
Dec 27 at 13:49
add a comment |
I have the following question: suppose I have an input that only accepts a specific type of input, like numbers with only two decimal positions. I was thinking about controlling this in a SFC which wraps the input controller and contains this logic in it so that I don't have to have a handler in every component that uses it. However, I'm finding it hard to control it without (precisely) keeping a state. I'm wondering if my approach is correct.
This is what the SFC would look like:
import React from 'react';
import PropTypes from 'prop-types';
const DecimalNumbersInput = (props) => {
const onChange = (event) => {
// Should I do this?
if (event.currentTarget.value ...) { // checks if it's a decimal number and if it has only two decimal numbers
props.onChange(event.currentTarget.value);
} else {
// Prevents this?
}
}
return (
<input
disabled={props.disabled}
onChange={(event) => {
onChange(event)
}}
/>
);
}
DecimalNumbersInput.propTypes = {
disabled: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
};
export default DecimalNumbersInput;
So the idea is that it would show some sort of error if the number is invalid, otherwise bubble the change to the parent component, which would keep state for the input value.
What do you think?
javascript reactjs
asked Dec 27 at 13:33
Heathcliff
94631128
I have the following question: suppose I have an input that only accepts a specific type of input, like numbers with only two decimal positions. I was thinking about controlling this in a SFC which wraps the input controller and contains this logic in it so that I don't have to have a handler in every component that uses it. However, I'm finding it hard to control it without (precisely) keeping a state. I'm wondering if my approach is correct.
This is what the SFC would look like:
import React from 'react';
import PropTypes from 'prop-types';
const DecimalNumbersInput = (props) => {
const onChange = (event) => {
// Should I do this?
if (event.currentTarget.value ...) { // checks if it's a decimal number and if it has only two decimal numbers
props.onChange(event.currentTarget.value);
} else {
// Prevents this?
}
}
return (
<input
disabled={props.disabled}
onChange={(event) => {
onChange(event)
}}
/>
);
}
DecimalNumbersInput.propTypes = {
disabled: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
};
export default DecimalNumbersInput;
So the idea is that it would show some sort of error if the number is invalid, otherwise bubble the change to the parent component, which would keep state for the input value.
What do you think?
javascript reactjs
javascript reactjs
asked Dec 27 at 13:33
Heathcliff
94631128
asked Dec 27 at 13:33
Heathcliff
94631128
asked Dec 27 at 13:33
Heathcliff
94631128
asked Dec 27 at 13:33
Heathcliff
94631128
asked Dec 27 at 13:33
Heathcliff
94631128
94631128
1
Your approach looks fine. I didn't understand this partI'm finding it hard to control it without (precisely) keeping a state
– Murli Prajapati
Dec 27 at 13:49
add a comment |
1
Your approach looks fine. I didn't understand this partI'm finding it hard to control it without (precisely) keeping a state
– Murli Prajapati
Dec 27 at 13:49
1
1
Your approach looks fine. I didn't understand this part
I'm finding it hard to control it without (precisely) keeping a state– Murli Prajapati
Dec 27 at 13:49
Your approach looks fine. I didn't understand this part
I'm finding it hard to control it without (precisely) keeping a state– Murli Prajapati
Dec 27 at 13:49
add a comment |
active
oldest
votes
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%2f53945952%2fusing-a-stateless-functional-component-to-control-input-values%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53945952%2fusing-a-stateless-functional-component-to-control-input-values%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
1
Your approach looks fine. I didn't understand this part
I'm finding it hard to control it without (precisely) keeping a state– Murli Prajapati
Dec 27 at 13:49