如何将默认值和占位符赋予redux表单选择字段?

时间:2017-09-18 11:09:02

标签: javascript reactjs redux-form

我有redux表单选项的数组迭代选项...我将如何给出dafault值和占位符,因为它显示了不想要的数组的第一个值...我想显示占位符而不是

  <Field
    name="facilityId"
    component="select"
    className="form-control"
    placeholder="sdsfdsafjdsafijdsaoi"
  >
    {owners.map((data, i) => {
      return (
        <option value={data._id} key={i}>{data.profile.name}</option>
      )
    })}
  </Field>

2 个答案:

答案 0 :(得分:4)

您可以执行以下操作

<ControlLabel>Patients</ControlLabel>
    <Field
        name="facilityId"
        component="select"
        className="form-control"
        placeholder="sdsfdsafjdsafijdsaoi"
    >
        <option value="-1" disabled>Choose patient</option>
        {owners.map((data, i) => {
            return (
                <option value={data._id} key={i}>{data.profile.name}</option>
            );
        })}
    </Field>
<FormControl.Feedback />

PS:抱歉,如果格式化已关闭。我正在用手机打字。

答案 1 :(得分:1)

使用Redux格式,多个选择字段,并异步加载选项-我遇到的问题是所选答案无法100%地正常工作。这对我来说有效。请注意,value""

<ControlLabel>Patients</ControlLabel>
<Field
    name="facilityId"
    component="select"
    className="form-control"
    placeholder="sdsfdsafjdsafijdsaoi"
>
    <option value="" disabled>Choose patient</option>
    {owners.map((data, i) => {
        return (
            <option value={data._id} key={i}>{data.profile.name}</option>
        );
    })}
</Field>