时间戳

首页 > 解决方案 > 使用 reactDOM.render 渲染时出现问题

javascript - 使用 reactDOM.render 渲染时出现问题

问题描述

我在 HTML 中使用了一个用于下拉自动完成的“数据列表”。这是一个例子

<datalist id="languages">
  <option value="HTML">
  <option value="C#">
  <option value="C++">
</datalist>

<input type="text" list="languages">

所以基本上输入文本字段将在用户输入时提供这三个选项。

在我的反应项目中，我有一个空的数据列表

   <datalist id="allChoices">

    </datalist>

<input id="textField1" list="allChoices" type="text" onkeypress="function1(event)">

因此，当用户键入时，我会将所有元素呈现到我的数据列表中。但是它不运行。这是function1的简化代码（当用户在键盘上键入时激活的代码）

function function1(e) {
    ...
    ...

  for (var i=0; i < arrayOptions.length; i++) {
    ReactDOM.render(<option value="{arrayOptions[i]}">,document.getElementById('allChoices'));
  }

}

为简单起见，我尝试这样做，看看它是否可行

function function1(e) {
    ...
    ...

  for (var i=0; i < arrayOptions.length; i++) {
    ReactDOM.render(<option value="hello">,document.getElementById('allChoices'));
  }

}

但仍然无法工作/运行。我已经检查了“arrayOptions”并且该数组很好。在 for 循环正常工作之前会发生什么。

有语法错误吗？或者，每当用户键入时，如何正确地将 arrayOptions 数组中的元素呈现到我的数据列表中？

标签： javascriptreactjs

解决方案

推荐阅读