javascript - get value from an input field in react - Stack Overflow

admin管理员组

文章数量:1395015

I try to make a form validator for a inputfield. I try to get the input value from it using the getElementById().value method. But when I console log the variable is empty. I tried to convert my variable into a string, it doesn't solve the problem. When I type some extra text, the counter next to it increases. But no worthy value showed. How e it's not showing the right input value? thanks!

code of my validator:

const newName = document.getElementById('name');
let newNameValue = document.getElementById('name').value;

let beerArrayNames = this.state.beerArrayName;
newName.addEventListener('input', function(event) {
  console.log('test ' + newNameValue);


  if (beerArrayNames.includes(newNameValue)) {
    newName.setCustomValidity('This already exist!');
  } else {
    newName.setCustomValidity('');
  }
});

<p>Name: <input type='text' id='name' name='name' placeholder='fill in the name' required/> </p>

I try to make a form validator for a inputfield. I try to get the input value from it using the getElementById().value method. But when I console log the variable is empty. I tried to convert my variable into a string, it doesn't solve the problem. When I type some extra text, the counter next to it increases. But no worthy value showed. How e it's not showing the right input value? thanks!

code of my validator:

const newName = document.getElementById('name');
let newNameValue = document.getElementById('name').value;

let beerArrayNames = this.state.beerArrayName;
newName.addEventListener('input', function(event) {
  console.log('test ' + newNameValue);


  if (beerArrayNames.includes(newNameValue)) {
    newName.setCustomValidity('This already exist!');
  } else {
    newName.setCustomValidity('');
  }
});

<p>Name: <input type='text' id='name' name='name' placeholder='fill in the name' required/> </p>

• javascript
• reactjs

Share Improve this question Follow edited May 31, 2018 at 16:34 RIYAJ KHAN 15.3k55 gold badges3333 silver badges5555 bronze badges asked May 31, 2018 at 16:04 Dave_888Dave_888 43333 gold badges66 silver badges1414 bronze badges 2

• Where are you using this in React? Do you have sample code of how it's applied? The containing class for example? – Eddie D Commented May 31, 2018 at 16:19
• @EdwinDelRio I'm coding an react.js app but need a validtion to check if the input value name is already used in my back end. – Dave_888 Commented May 31, 2018 at 16:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Even though this question has an accepted answer already, I think it's important to note that a solution more in line with React's design principles would be to not directly retrieve elements in the DOM and attach event listeners to them.

Instead, you can define an onChange prop for the input element, which when triggered validates the input (and most likely update some UI state to show/hide error messages).

A good example of how to use of onChange exists in the forms documentation.

You need to set your variable inside your event listener (I mented out the other stuff because it doesn't work and is not part of your question)

newNameValue = this.value;

const newName = document.getElementById('name');
let newNameValue;

//let beerArrayNames = this.state.beerArrayName;
newName.addEventListener('input', function(event) {
  newNameValue = this.value;
  console.log('test ' + newNameValue);


  //if (beerArrayNames.includes(newNameValue)) {
    //newName.setCustomValidity('This already exist!');
  //} else {
    //newName.setCustomValidity('');
  //}
});

<p>Name: <input type='text' id='name' name='name' placeholder='fill in the name' required/> </p>

You should fetch value using event.target.value.

newName.addEventListener('input', function(event) {
  console.log('test ', event.target.value);

});

Working plunker

本文标签： javascriptget value from an input field in reactStack Overflow