三元运算符在 React 组件中用于设置 datalist 选项的值时失败

Posted 2023-02-23

【中文标题】三元运算符在 React 组件中用于设置 datalist 选项的值时失败

【英文标题】：Ternary operator fails when used to set value of datalist option in React component

【发布时间】：2021-02-19 16:30:43

【问题描述】：

我的代码是用 React 编写的，我试图有条件地交换分配给每个元素中值的内容。 swap 被作为道具传入，我认为它可以充当触发器，但是当我使用 swap=true 与 swap=null 时，我没有得到任何改变。

function DataList(label, onSelect, options, swap) 

    return (
        <DataListContainer>
            <CustomInput placeholder=label list="items" name="item" id="item" required onChange=onSelect></CustomInput>
            <datalist id='items' >
                options? options.map(option => <option key=option.number value=swap ? option.title : option.number>swap ? option.number : option.title</option>) : null
            </datalist>
        </DataListContainer>
    );

这是实际呈现我的组件的代码。

<DataList 
  label='Select Chapter Number' 
  onSelect=changeChapterNumber 
  options=chaptersFromSelectedComic
/>
<DataList 
  label='Select Chapter Title' 
  onSelect=changeChapter 
  options=chaptersFromSelectedComic 
  swap=true
 />

【问题讨论】：

swap ? option.number : option.title 这些应该是不同的还是应该匹配的三元组？我看到该值与option 中的文本相同，也请执行上述评论。

@KetanRamteke datalist

奇怪的是，文档中的 options 都没有关闭，所以我不知道这是一个错字还是真的正确，但它在 JSX 中绝对无效。在沙箱中尝试过。根据does-react-js-support-html5-datalist 在反应选项标签已关闭。

【参考方案1】：

问题

您已将列表名称 (list="items") 包含在组件中，因此所有 datalist 选项都引用了相同的初始定义选项。

解决方案

将list 属性公开为prop，这样每个DataList 组件都可以指定自己的一组选项。

function DataList(
  label,
  list, // <-- add list prop
  onSelect,
  options,
  swap
) 
  return (
    <DataListContainer>
      <CustomInput
        placeholder=label
        list=list // <-- set list attribute for input
        name="item"
        id="item"
        required
        onChange=onSelect
      ></CustomInput>
      <datalist id=list> // <-- set id for datalist options
        options
          ? options.map((option) => (
              <option
                key=option.number
                value=swap ? option.title : option.number
              >
                swap ? option.number : option.title
              </option>
            ))
          : null
      </datalist>
    </DataListContainer>
  );

将list 属性传递给每个DataList 组件。

<DataList list="itemsA" label="List A" options=options />
<DataList list="itemsB" label="List B" options=options swap />

【讨论】：

太棒了，我完全疏忽了，但谢谢你，如果没有你，我不会想出来的！