reactjs - 使用带有语义 UI 的 Redux 表单

Question

我试图弄清楚我应该将我的扩展运算符放在我的语义 UI 表单中的哪个位置。

<div class="ui selection dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu" {...gender}>
    <div class="item" data-value="0">Male</div>
    <div class="item" data-value="1">Female</div>
  </div>
</div>


function validate(values) {
  const errors = {};

  console.log(values.gender);
}

{...gender}目前你可以看到我在divwith 类中有我的扩展运算符 , menu。当我从下拉框中选择时，它会记录undefined。

有人有想法吗？

Answer 1

我必须学习更多关于语义 CSS 类的知识。这是使用 Redux Form 创建漂亮下拉列表的代码

<div className="field">
  <select className="ui dropdown input" {...options}>
    <option value="">This is the header side the input</option>
    <option value="1">Option 1</option>
    <option value="0">Option 2</option>
    <option value="2">Option 3</option>
  </select>
</div>

如果您不给该选项一个值，它会将其视为您的标题/标题。IT 将不是一种选择，一旦用户做出选择，它就会消失。{...option} 用于 Redux Router 的验证。