reactjs - 将 Redux 表单与语义 UI 结合使用

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} 位于 div 中，具有 menu 类。当我从下拉框中选择时，它将记录未定义。

有人有想法吗？

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 的验证。