React中获取输入框值失败求助：控制台输出为空

嘿，我一眼就看出问题在哪了——你只在页面刚加载的时候获取了一次输入框的value，之后用户输入内容时，这个值根本没更新！

问题根源 #

你这段代码里：

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

是在页面初始化时执行的，这时候输入框里还没内容，所以newNameValue一开始就是空字符串。之后用户输入触发input事件时，你打印的还是这个初始的空值，自然看不到用户输入的内容。

修复后的代码 #

把获取输入值的操作放到input事件的回调函数里，每次用户输入都重新读取最新值：

const newName = document.getElementById('name');
let beerArrayNames = this.state.beerArrayName;
newName.addEventListener('input', function(event) {
    // 每次输入时都获取当前最新的输入值
    let newNameValue = newName.value;
    console.log('test ' + newNameValue);
    if (beerArrayNames.includes(newNameValue)) {
        newName.setCustomValidity('This already exist!');
    } else {
        newName.setCustomValidity('');
    }
});

更简洁的写法 #

其实还可以直接用事件对象的target属性来获取当前输入框的值，省去重复获取DOM元素的步骤：

const newName = document.getElementById('name');
let beerArrayNames = this.state.beerArrayName;
newName.addEventListener('input', function(event) {
    const currentValue = event.target.value;
    console.log('test ' + currentValue);
    if (beerArrayNames.includes(currentValue)) {
        newName.setCustomValidity('This already exist!');
    } else {
        newName.setCustomValidity('');
    }
});

这样修改后，你就能在控制台看到用户实时输入的内容，验证逻辑也能正常工作了。

内容的提问来源于stack exchange，提问作者Dave_888