为React-Bootstrap的FormControl指定默认值

Question

在react-bootstrap@0.24.5中，我使用了Input属性defaultValue来指定组合框中选择的起始值

<Input type='select'
             ref='templateSelect'
             defaultValue={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</Input>

在react-bootstrap@0.30.7（最新版本）中，Input被弃用，应该使用新组件FormControl，但它不提供这样的属性，应该如何处理？

应该使用value吗？

<FormControl type='select'
             ref='templateSelect'
             value={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</FormControl>

或者可能是这样的：

value={this.state.templateId || 'default value'}

- zmii

---

就我所知，FormControl 的 value 属性基本上对应于常规的 input 的 value 属性，因此像上面那样使用 value 来设置默认值应该可以正常工作。我不建议使用 value={this.state.templateId || 'default value'}，因为如果您的更改处理程序将 this.state.templateId 设置为解析为 false 的某些内容，则输入字段中显示的值将是“默认值”。 - Nikolaj Dam Larsen

Answer 1

我没有测试过这个，但是从使用 defaultValue 属性的 React Bootstrap FormControl的源代码 看来应该可行：

<FormControl type="select"
  ref="templateSelect"
  defaultValue={this.state.templateId}
  onChange={this.handleTemplateChange}>
   {options}
</FormControl>

如果多选，defaultValue 必须是一个数组：

this.state = {
  templateId:['some value']
}
<FormControl 
  multiple
  type="select"
  ref="templateSelect"
  defaultValue={this.state.templateId}
  onChange={this.handleTemplateChange}>
   {options}
</FormControl>

- Yangshun Tay

---

defaultValue不起作用！我正在使用相同的代码。 - Jayna Tanawala

请注意，这在Bootstrap 5中可能已更改。请改用value=属性。 - Sufendy

Answer 2

使用 "react-bootstrap": "1.0.0-beta.14" 版本，value 属性如下所示：

<Form.Control as="select" value={user}>
    { users.map(opt => (<option>{ opt }</option>)) }
</Form.Control>

- Brent Washburne

---

他实际上是要求默认值而不是实际值。 - klendi

@klendi ，默认值无法生效，需要使用 value prop：https://github.com/react-bootstrap/react-bootstrap/issues/2091 - Brent Washburne

Answer 3

（嗨，Google用户！）

如果您正在尝试通过网络调用、Promise或其他异步函数将选项数组加载到表单控件中，请确保在选项数组完全加载之前不要渲染选择字段，否则defaultValue将无法正常工作。

（适用于react-bootstrap 1.0.0-beta.8。您的情况可能有所不同。）

- Krister Berntsen

---

今天是2022年02月09日，使用"react-bootstrap": "^2.5.0"是正确的。 - sineverba

Answer 4

这样您就可以设置默认值。

                <option  >is any default</option>
                {

                    dataoption.map(item => {

                        return <option key={item.Value} value={item.Value} selected={defaultselect ? defaultselect == item.Value ? true : false : false}  >{item.Text}</option>
                    })
                }

            </FormControl>

你可能会在控制台收到一个错误提示：

警告：在 上使用 defaultValue 或 value 属性，而不是设置 selected。但是设置 defaultValue 或 value 并不能解决你的问题。

- Hossein Delara