logo
Home JAVASCRIPTJAVACHASHPYTHONPHPCPPIOSSQLHTML
down
shadow

how to pass the value of one input to another input's onBlur event in reactjs?


how to pass the value of one input to another input's onBlur event in reactjs?

Content Index :

how to pass the value of one input to another input's onBlur event in reactjs?
Tag : reactjs , By : Jonathan Bernard
Date : November 27 2020, 11:01 PM

I think the issue was by ths following , I see you're storing your endDate as a state. So, when the user blurs startDate call validateStartDate. In that function, use the endDate state value to validate.
See the pseudo code
<div>
   <input type="text" name="startdate" value={this.state.startDate}  onBlur={this.validateStartDate} /> 
    <input type="text" name="enddate"value={this.state.endDate} onBlur={this.validateEndDate}/> 
</div>

function validateStartDate(){
   //check this.state.startDate < this.state.endDate
}

<div>
   <input type="text" ref="startDate" name="startdate" value={this.state.startDate}  onBlur={this.validateStartDate} /> 
    <input type="text" ref="endDate" name="enddate"value={this.state.endDate} onBlur={this.validateEndDate}/> 
</div>

function validateStartDate(){
   var startDate= ReactDOM.findDOMNode(this.refs.startDate).value
   var endDate = ReactDOM.findDOMNode(this.refs.endDate).value
   //check startDate < endDate
}

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Tags :

how to pass the value of one input to another inputs onBlur event in reactjs , How to pass input text as parameter to javascript onblur event , Using an input field with onBlur and a value from state blocks input in Reactjs JSX , onBlur event runs automatically when loading application ReactJS , onclick eve ,

How can I apply an onFocus and onBlur event to all inputs, select boxes and textareas within a form only

Tag : javascript , By : joshboles
Date : March 29 2020, 07:55 AM
it helps some times I need your help, , You could use:
$('#form1 select, #form1 input, #form1 textarea').focus(function(){
    $(this).css('background-color', 'yellow');
});

$('#form1 select, #form1 input, #form1 textarea').blur(function(){
    $(this).css('background-color', 'white');
}); 

$('#form1 select, #form1 input, #form1 textarea').on('focus blur', function(){
    $(this).css('background-color', $(this).is(':focus') ? "yellow" : "white");
});

How to pass input text as parameter to javascript onblur event?

Tag : javascript , By : pdkent
Date : March 29 2020, 07:55 AM
will be helpful for those in need This is the code for an input text field. What I want is to call the "checkDateFormat" function with the text input as a parameter when the user leaves the field. , Try to use,
 onblur="checkDateFormat(this.value)" 

 onblur="checkDateFormat(this.date_t.value)"

Using an input field with onBlur and a value from state blocks input in Reactjs JSX?

Tag : reactjs , By : Jojo
Date : March 29 2020, 07:55 AM
I wish this help you The value attribute ties the value of the input to that state, and if the user changes the value then the state and the input value is no longer tied to each other. So React stops that from happening.
You probably want to use the defaultValue attribute instead.

Event when onblur input jquery

Tag : javascript , By : tommy
Date : March 29 2020, 07:55 AM
To fix the issue you can do I have an input text (adress) wich take results from Google Maps Autocomplete. After a click on result, the result appear on the input text and display submit button. I would like, if we click one more time on the input text : - erase the result from google (to start on new research) - hide the submit button. , The solution I've found :
$("#address").on('blur focus', function() {
    if (this.value=='') {
    $('#button_submit').css('display', 'none');         
     }
});

onBlur event runs automatically when loading application ReactJS

Tag : javascript , By : Si Gardner
Date : March 29 2020, 07:55 AM
around this issue yo just need to give the function name there and on blur react will execute this function. so you need to write this:-
onBlur ={ alert }

onBlur ={ ()=>{this.error('lastName');} }
Related Posts Related QUESTIONS :
  • How to display react numerical props only if they pass from the container?
  • Input in another component, error with target
  • What is the difference between props and children in Gatsby?
  • Validating conditional pairs of props with Typescript
  • React-Dropzone how convert each file to base64
  • How to change the return of a function to int?
  • Import only grid system from bootstrap to react
  • TypeScript Type for function arguments not erroring?
  • Unexpected user of comma operator no-sequences
  • React Native onChangeText like onChange in ReactJS
  • How to dynamically render an element on clicking a button
  • Cannot import components from react-bootstrap
  • How to prevent Office UI Fabric React DatePicker flyout from stealing focus when allowTextInput is true?
  • How delete item from redux state?
  • Uncaught TypeError: map is not a function In Reactjs with Firebase
  • Alternative to componentWillReceiveProps for my particular use case
  • Pokemon, API call Variable doesn't save
  • Rendered more hooks than during the previous render. when posting form data with React Hooks
  • How can I envoke <Link to=''> route transition from a custom function?
  • How to change certain div color base on number
  • Hide Navbar on some routes (React Router v5)
  • is it safe to ignore react's warning about calling the useState hook conditionally when only the parameter is conditiona
  • How to pass a function as a prop to React function component?
  • Creating a function that replace a letter with a line break
  • How to add and remove property from Redux state
  • Can I, (and should I), make assertions about what HTML elements a component renders using Enzyme's shallow()?
  • Testing function calls in Jest after button click (mocking fetch calls)
  • How can I show a card shadow on all sides?
  • Jest - Map through an Array of Items and test their Values
  • Run Effect hook only when both dependencies change
  • What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So wh
  • Font size of tooltip in speeddialaction of React's Material UI
  • Module Not Found - Webpack Dev Server
  • React not rendering all elements within a list of components
  • How to change attribute of a React Element
  • ReactJs: How to back focus to input field after resetting the form
  • Multilanguage in react using redux
  • React JS — how do I add child components and set calculated transformations?
  • ReactJS componentDidUpdate() prevState equals to currentState
  • TypeScript error: JSX element type 'Tree' does not have any construct or call signatures. I'm not able to import my own
  • createProvider is not exported from react-redux?
  • Error:(19, 35) TS2304: Cannot find name 'T'. Why I can't extend interface in TS?
  • How can I secure images in S3 buckets with Auth0 and a React front-end
  • React Import Multiple Functions
  • React render when props change
  • Cannot read property 'array' of undefined
  • What is the expected return of `useEffect` used for?
  • Why i need to install npm for react native app
  • How to fix 'module not found' for audio files using file-loader? Images, CSS, and JSON are working just fine
  • Can't render the component received as a prop.children in my parent component
  • rootInstance.findByType("input"); Giving Expected 1 but found 2 instances with node type : "undefined&quo
  • Reset state to initial state only for specific state variables
  • Get error TS2322: Type 'any' is not assignable to type 'never'
  • Is it possible to update the store outside of the Provider context in Redux?
  • Copy to clipboard is copying value with two newlines
  • How to test useRef with the "current" prop in jest/enzyme
  • How to remove value of each key in Async Storage in React Native at the time of Logout
  • Is there a simpler way to write this React code
  • Auth0. How to get user's permissions in access token?
  • this.setState is not updating the state property
    		•
    shadow
    Privacy Policy - Terms - Contact Us © scrbit.com