将 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);
}

目前您可以看到我在 div 和 class menu 中有我的传播运算符 {...gender}。当我从下拉框中 select 时，它会记录 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>

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

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

Using Redux Form with Semantic UI

reactjs

semantic-ui

redux

redux-form