How to autofocus on the USD value when 3 values are entered in reactjs?
As mentioned above, how would I set the focus on my USD value field when the 1 of the 3 inputs are entered , or all 3?
The code below currently displays the data from the 3 different type of fields (amount charged, currency and fysigned)
CODE
https://codesandbox.io/s/8zv2v5mr22
Thank you
reactjs react-bootstrap react-select
asked Nov 15 at 22:44
bobb1213131
728
add a comment |
As mentioned above, how would I set the focus on my USD value field when the 1 of the 3 inputs are entered , or all 3?
The code below currently displays the data from the 3 different type of fields (amount charged, currency and fysigned)
CODE
https://codesandbox.io/s/8zv2v5mr22
Thank you
reactjs react-bootstrap react-select
asked Nov 15 at 22:44
bobb1213131
728
when the 1 of the 3 inputs are entered , or all 3 - Can you explain this more?
– franklins
Nov 15 at 23:39
add a comment |
As mentioned above, how would I set the focus on my USD value field when the 1 of the 3 inputs are entered , or all 3?
The code below currently displays the data from the 3 different type of fields (amount charged, currency and fysigned)
CODE
https://codesandbox.io/s/8zv2v5mr22
Thank you
reactjs react-bootstrap react-select
asked Nov 15 at 22:44
bobb1213131
728
As mentioned above, how would I set the focus on my USD value field when the 1 of the 3 inputs are entered , or all 3?
The code below currently displays the data from the 3 different type of fields (amount charged, currency and fysigned)
CODE
https://codesandbox.io/s/8zv2v5mr22
Thank you
reactjs react-bootstrap react-select
reactjs react-bootstrap react-select
asked Nov 15 at 22:44
bobb1213131
728
asked Nov 15 at 22:44
bobb1213131
728
asked Nov 15 at 22:44
bobb1213131
728
asked Nov 15 at 22:44
bobb1213131
728
asked Nov 15 at 22:44
bobb1213131
728
728
when the 1 of the 3 inputs are entered , or all 3 - Can you explain this more?
– franklins
Nov 15 at 23:39
add a comment |
when the 1 of the 3 inputs are entered , or all 3 - Can you explain this more?
– franklins
Nov 15 at 23:39
when the 1 of the 3 inputs are entered , or all 3 - Can you explain this more?
– franklins
Nov 15 at 23:39
when the 1 of the 3 inputs are entered , or all 3 - Can you explain this more?
– franklins
Nov 15 at 23:39
add a comment |
1 Answer
1
active
oldest
votes
A DOM Ref for the USD value input field can be set and then used to control focus on it.
In the constructor for the App component, create a Ref field.
constructor(props) {
//...
this.USDValueInputRef = React.createRef();
//...
}
For the USDValue FormControl, set inputRef prop to the Ref created in constructor for the App component.
<FormControl
type="text"
defaultValue={this.state.USDValue}
inputRef={this.USDValueInputRef}
/>
The where you check that the previous three field values are set, you can focus the USDValue input,
if (/* condition */) this.USDValueInputRef.current.focus();
Bonus:
You can move state updates from the onChangeAmountCharged, handleChangeCurrency and handleChangeFYSigned event handlers to setUSDValue.
onChangeAmountCharged(e) {
this.setUSDValue({ AmountCharged: e.target.value })
}
handleChangeCurrency(e) {
this.setUSDValue({ Currency: e.value })
}
handleChangeFYSigned(e) {
this.setUSDValue({ FYSigned: e.value })
}
Then update the state in a single go in setUSDValue.
setUSDValue(params) {
let currencyParams = { ...this.state, ...params };
const { AmountCharged, Currency, FYSigned } = currencyParams;
const completed = AmountCharged && Currency && FYSigned;
if (completed) {
currencyParams = {
...currencyParams,
USDValue: `${AmountCharged} ${Currency} ${FYSigned}`
};
}
this.setState(currencyParams, () => {
if (completed) this.USDValueInputRef.current.focus();
})
}
answered Nov 15 at 23:52
Oluwafemi Sule
10.8k1431
thank you!!!!!!!!!!!!
– bobb1213131
Nov 16 at 14:54
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%2f53328925%2fhow-to-autofocus-on-the-usd-value-when-3-values-are-entered-in-reactjs%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
A DOM Ref for the USD value input field can be set and then used to control focus on it.
In the constructor for the App component, create a Ref field.
constructor(props) {
//...
this.USDValueInputRef = React.createRef();
//...
}
For the USDValue FormControl, set inputRef prop to the Ref created in constructor for the App component.
<FormControl
type="text"
defaultValue={this.state.USDValue}
inputRef={this.USDValueInputRef}
/>
The where you check that the previous three field values are set, you can focus the USDValue input,
if (/* condition */) this.USDValueInputRef.current.focus();
Bonus:
You can move state updates from the onChangeAmountCharged, handleChangeCurrency and handleChangeFYSigned event handlers to setUSDValue.
onChangeAmountCharged(e) {
this.setUSDValue({ AmountCharged: e.target.value })
}
handleChangeCurrency(e) {
this.setUSDValue({ Currency: e.value })
}
handleChangeFYSigned(e) {
this.setUSDValue({ FYSigned: e.value })
}
Then update the state in a single go in setUSDValue.
setUSDValue(params) {
let currencyParams = { ...this.state, ...params };
const { AmountCharged, Currency, FYSigned } = currencyParams;
const completed = AmountCharged && Currency && FYSigned;
if (completed) {
currencyParams = {
...currencyParams,
USDValue: `${AmountCharged} ${Currency} ${FYSigned}`
};
}
this.setState(currencyParams, () => {
if (completed) this.USDValueInputRef.current.focus();
})
}
answered Nov 15 at 23:52
Oluwafemi Sule
10.8k1431
thank you!!!!!!!!!!!!
– bobb1213131
Nov 16 at 14:54
add a comment |
A DOM Ref for the USD value input field can be set and then used to control focus on it.
In the constructor for the App component, create a Ref field.
constructor(props) {
//...
this.USDValueInputRef = React.createRef();
//...
}
For the USDValue FormControl, set inputRef prop to the Ref created in constructor for the App component.
<FormControl
type="text"
defaultValue={this.state.USDValue}
inputRef={this.USDValueInputRef}
/>
The where you check that the previous three field values are set, you can focus the USDValue input,
if (/* condition */) this.USDValueInputRef.current.focus();
Bonus:
You can move state updates from the onChangeAmountCharged, handleChangeCurrency and handleChangeFYSigned event handlers to setUSDValue.
onChangeAmountCharged(e) {
this.setUSDValue({ AmountCharged: e.target.value })
}
handleChangeCurrency(e) {
this.setUSDValue({ Currency: e.value })
}
handleChangeFYSigned(e) {
this.setUSDValue({ FYSigned: e.value })
}
Then update the state in a single go in setUSDValue.
setUSDValue(params) {
let currencyParams = { ...this.state, ...params };
const { AmountCharged, Currency, FYSigned } = currencyParams;
const completed = AmountCharged && Currency && FYSigned;
if (completed) {
currencyParams = {
...currencyParams,
USDValue: `${AmountCharged} ${Currency} ${FYSigned}`
};
}
this.setState(currencyParams, () => {
if (completed) this.USDValueInputRef.current.focus();
})
}
answered Nov 15 at 23:52
Oluwafemi Sule
10.8k1431
thank you!!!!!!!!!!!!
– bobb1213131
Nov 16 at 14:54
add a comment |
A DOM Ref for the USD value input field can be set and then used to control focus on it.
In the constructor for the App component, create a Ref field.
constructor(props) {
//...
this.USDValueInputRef = React.createRef();
//...
}
For the USDValue FormControl, set inputRef prop to the Ref created in constructor for the App component.
<FormControl
type="text"
defaultValue={this.state.USDValue}
inputRef={this.USDValueInputRef}
/>
The where you check that the previous three field values are set, you can focus the USDValue input,
if (/* condition */) this.USDValueInputRef.current.focus();
Bonus:
You can move state updates from the onChangeAmountCharged, handleChangeCurrency and handleChangeFYSigned event handlers to setUSDValue.
onChangeAmountCharged(e) {
this.setUSDValue({ AmountCharged: e.target.value })
}
handleChangeCurrency(e) {
this.setUSDValue({ Currency: e.value })
}
handleChangeFYSigned(e) {
this.setUSDValue({ FYSigned: e.value })
}
Then update the state in a single go in setUSDValue.
setUSDValue(params) {
let currencyParams = { ...this.state, ...params };
const { AmountCharged, Currency, FYSigned } = currencyParams;
const completed = AmountCharged && Currency && FYSigned;
if (completed) {
currencyParams = {
...currencyParams,
USDValue: `${AmountCharged} ${Currency} ${FYSigned}`
};
}
this.setState(currencyParams, () => {
if (completed) this.USDValueInputRef.current.focus();
})
}
answered Nov 15 at 23:52
Oluwafemi Sule
10.8k1431
A DOM Ref for the USD value input field can be set and then used to control focus on it.
In the constructor for the App component, create a Ref field.
constructor(props) {
//...
this.USDValueInputRef = React.createRef();
//...
}
For the USDValue FormControl, set inputRef prop to the Ref created in constructor for the App component.
<FormControl
type="text"
defaultValue={this.state.USDValue}
inputRef={this.USDValueInputRef}
/>
The where you check that the previous three field values are set, you can focus the USDValue input,
if (/* condition */) this.USDValueInputRef.current.focus();
Bonus:
You can move state updates from the onChangeAmountCharged, handleChangeCurrency and handleChangeFYSigned event handlers to setUSDValue.
onChangeAmountCharged(e) {
this.setUSDValue({ AmountCharged: e.target.value })
}
handleChangeCurrency(e) {
this.setUSDValue({ Currency: e.value })
}
handleChangeFYSigned(e) {
this.setUSDValue({ FYSigned: e.value })
}
Then update the state in a single go in setUSDValue.
setUSDValue(params) {
let currencyParams = { ...this.state, ...params };
const { AmountCharged, Currency, FYSigned } = currencyParams;
const completed = AmountCharged && Currency && FYSigned;
if (completed) {
currencyParams = {
...currencyParams,
USDValue: `${AmountCharged} ${Currency} ${FYSigned}`
};
}
this.setState(currencyParams, () => {
if (completed) this.USDValueInputRef.current.focus();
})
}
answered Nov 15 at 23:52
Oluwafemi Sule
10.8k1431
edited Nov 15 at 23:59
answered Nov 15 at 23:52
Oluwafemi Sule
10.8k1431
answered Nov 15 at 23:52
Oluwafemi Sule
10.8k1431
answered Nov 15 at 23:52
Oluwafemi Sule
10.8k1431
10.8k1431
thank you!!!!!!!!!!!!
– bobb1213131
Nov 16 at 14:54
add a comment |
thank you!!!!!!!!!!!!
– bobb1213131
Nov 16 at 14:54
thank you!!!!!!!!!!!!
– bobb1213131
Nov 16 at 14:54
thank you!!!!!!!!!!!!
– bobb1213131
Nov 16 at 14:54
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%2f53328925%2fhow-to-autofocus-on-the-usd-value-when-3-values-are-entered-in-reactjs%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
when the 1 of the 3 inputs are entered , or all 3 - Can you explain this more?
– franklins
Nov 15 at 23:39