Reactjs - 使用 javascript 在下拉列表中填充数组元素答案

【问题标题】：Reactjs - fill array elements in dropdown list using javascriptReactjs - 使用 javascript 在下拉列表中填充数组元素
【发布时间】：2020-04-16 13:53:14
【问题描述】：

我正在尝试使用给定数组“选项”中的数据填充下拉列表，但我遇到了一个错误，它无法读取 null 的属性 appendChild。

如果我对“select”使用“document.getElementByClassName”而不是 document.getElementById，则会遇到“select.appendChild 不是函数”的错误

适用于 codepen，但不适用于我的 react 函数。 https://codepen.io/michaellee212/pen/LYpGgrm

我不知道为什么会出现这个问题

代码：

    export default function ComposeEmailForm({ handleCompose, template_titles }) {

    var options = ['1', '2', '3', '4', '5'];

        var select = document.getElementById('template-select');
        for (var i = 0; i < options.length; i++) {
            var opt = options[i];
            var el = document.createElement('option');
            el.text = opt;
            el.value = opt;
            console.log(el);
            select.appendChild(el);
        }

    return (
        <select id='template-select'>
                    <option>----</option>
                </select>
)

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

React 和 JSX 的美妙之处在于您不必像这样进行 DOM 操作。事实上，你不应该做这样的事情。相反，您可以使用您的选项数组在 JSX 中创建 <option>s，如下所示：

export default function ComposeEmailForm({ handleCompose, template_titles }) {
  const options = ['1', '2', '3', '4', '5'];

  return (
    <select id='template-select'>
      <option>----</option>
      {options.map(option => <option key={option} value={option}>{option}</option>)}
    </select>
  );
}

让我知道这是否有帮助。

【讨论】：

有趣的解决方案。我不知道你可以用 react 做到这一点。虽然我在结尾处遇到了一个语法解决方案，其中 } 表示“。”预期的。不知道为什么会这样
啊，抱歉，我错过了选项映射的末尾括号，现在修复代码。这正是 React 的用途，如果你发现自己在使用 document.getElementById 或 document.createElement，那么你可能正在反对 React。

【解决方案2】：

返回的select标签不是真正的dom元素，在react中经过一些处理后会变成真正的dom元素，可以使用document.getElementByClassName ('template-select')查找。对于您遇到的错误，您可以这样修复。

import React,{useEffect} from 'react'
export default function ComposeEmailForm({ handleCompose, template_titles }) {
  useEffect(()=>{
    var options = ['1', '2', '3', '4', '5'];

    var select = document.getElementByClassName('template-select');
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement('option');
        el.text = opt;
        el.value = opt;
        console.log(el);
        select.appendChild(el);
    }
  },[])

  return (
    <select id='template-select'>
                <option>----</option>
            </select>
)

这里使用了UseEffect，它会在select成为真正的dom元素后运行。

可以了解react的生命周期和react hooks的一些知识。

componentDidMount() 方法在组件输出被渲染到 DOM 后运行。 -- https://reactjs.org/docs/state-and-lifecycle.html

如果你熟悉 React 类生命周期方法，你可以想 useEffect Hook 为 componentDidMount、componentDidUpdate 和 componentWillUnmount 组合。 -- https://reactjs.org/docs/hooks-effect.html

【讨论】：

此解决方案与 useEffect 挂钩。我还必须更改为 document.getElementById。