如何使用 Excel 文件中的条目填充 React 中的下拉菜单？答案

【问题标题】：How to populate dropdown menu in React with entries from an excel file?如何使用 Excel 文件中的条目填充 React 中的下拉菜单？
【发布时间】：2020-02-20 01:04:59
【问题描述】：

所以目前，这是我必须填充下拉菜单的内容。我使用 React Hook Form 创建我的下拉菜单。目前，这些选项是硬编码的，但我想从 excel 或 cvs 文件中读取数据，然后从该数据中填充我的选项。我用谷歌搜索，但大多数显示为从 json 文件填充。我想从excel文件中填充。谢谢！

<h5 for="secondaryControls">Secondary controls-other </h5>
           <div className="float-left">
      {fields.map((field, idx) => {
        return (

          <div key={`${field}-${idx}`}>

          <select name="primaryControls" ref={register}>



<option value="Component3">->Link:  Lift /Transfer Seat </option>
<option value="Component4">->ASENTO – XL-SEAT:  Lift /Transfer Board</option>
    value={field.value}
              onChange={e => ChangeItem(idx, e)}
          </select>
&nbsp;&nbsp;&nbsp;
            <input
              type="text"
style={{width: "370px"}}
          value={field.value}

              onChange={e => ChangeItem(idx, e)}
            />
            <button type="button" onClick={() => RemoveDropDown(idx)}>
              X
            </button>  &nbsp;&nbsp;&nbsp;
<button type="button" onClick={() => NewDropDown()}>
        +
      </button>
          <br /><br />
        </div>
        );
      })}
    </div>

【问题讨论】：

看看这里。这不是特定于反应的问题。您应该寻找有关如何从 javascript 中的 excel 文件中获取数据的解决方案，并尝试将该解决方案应用于您已有的内容：stackoverflow.com/questions/8238407/…

标签： javascript excel reactjs drop-down-menu react-hook-form

【解决方案1】：

您需要先将您的 excel 文件转换为 JSON。有多个库可以帮助您做到这一点，其中之一是 convert-excel-to-json。

将文件转换为 JSON 后，您可以轻松地循环遍历对象以创建下拉选项。

【讨论】：