Question

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

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

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

因此，基本上，每当用户键入内容时，输入文本字段都会提供这三个选项。

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

   <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数组中的元素正确呈现到我的数据列表中？

使用reactDOM.render渲染时遇到问题

0 个答案: