从反应中的输入字段获取值

Question

我尝试为inputfield制作表单验证器。我尝试使用getElementById().value方法从中获取输入值。但是当我控制日志时，变量是空的。我试图将我的变量转换为字符串，但它并没有解决问题。 当我输入一些额外的文本时，它旁边的计数器会增加。但没有值得展示的价值。怎么没有显示正确的输入值？谢谢！

验证码的代码：

＆＃13;

＆＃13;

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('');
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

即使这个问题已经有了一个公认的答案，我认为重要的是要注意更符合React设计原则的解决方案是不直接检索DOM中的元素并将事件监听器附加到它们。

相反，您可以为输入元素定义onChange道具，在触发时验证输入（并且很可能更新某些UI状态以显示/隐藏错误消息）。

forms documentation中有一个如何使用onChange的好例子。

Answer 2

你需要在你的事件监听器中设置你的变量（我注释掉了其他的东西，因为它不起作用而且不是你问题的一部分）

newNameValue = this.value;

＆＃13;

＆＃13;

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('');
  //}
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该使用event.target.value获取值。

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

});

工作plunker