为 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'}

Answer 1

我没有测试这个，但是从 React Bootstrap source code for FormControl 看来使用 defaultValue prop 应该有效：

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

If multi select defaultValue 必须是数组：

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

Answer 2

对于 "react-bootstrap": "1.0.0-beta.14"，使用 value 道具：

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

Answer 3

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

                <option  >is any default</option>
                {

                    dataoption.map(item => {

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

            </FormControl>

您可能会在控制台中收到错误消息：

警告：使用 defaultValue 或 value 道具而不是设置 selected on .

但是设置 defaultValue 或 value 并不能解决你的问题

Answer 4

（您好 Google 员工！）

如果您试图将一组选项加载到 Form-Control（通过网络调用、promise 或其他异步函数），请确保在选项-阵列已完全加载。否则默认值将不起作用。

（对于 react-bootstrap 1.0.0-beta.8 是正确的。您的里程可能会谨慎。）

为 react-bootstrap 的 FormControl 指定默认值

Specify default value to FormControl of react-bootstrap

javascript

reactjs

react-bootstrap