Question

document.getElementById即使存在ID也返回null。我没有弄明白我的代码有什么问题。

optionsChange() {
  let test = document.getElementById("filterOptions");
  let opVal= test.options[test.selectedIndex].text;
  console.log("options...", opVal);
}

以下代码是用render方法编写的

<select
  type="text"
  className="form-control"
  name="filterOptions"
  id="filterOptions"
  onChange={this.optionsChange()}
>
  <option key="select" value="allValues">All Values</option>
  {this.renderFilterOptions(item)}
</select>

有人可以帮忙吗？

Answer 1

您不需要使用getElementById。您可以使用event对象获取元素。 onChange事件默认会传递事件对象。

请注意，始终避免在react中直接访问dom对象

示例：

optiobjectonsChange(event) {
    let test = event.target;
    let opVal = test.options[test.selectedIndex].text;
    console.log("options...", opVal);
}

也不要在onchange中调用该函数，而要传递它的引用。

     <select type="text" className="form-control" name="filterOptions" id="filterOptions" onChange={this.optionsChange}>
            <option key="select" value="allValues">All Values</option>
            {this.renderFilterOptions(item)}
    </select>

Answer 2

您调用函数而不是将其分配为回调：

onChange={this.optionsChange}

请注意，像这样查询DOM是一种反模式，您应按照文档中的建议使用ref。

此外，您应该改用event的{{1}}对象。

document.getElementById即使存在ID也返回null

2 个答案: