為 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

我沒有對此進行測試，但是從FormControl的 React Bootstrap 源代碼看來，使用defaultValue道具應該可以工作：

<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>

Answer 2

使用"react-bootstrap": "1.0.0-beta.14" ，使用value prop：

<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道具 on 而不是設置selected on 。

但是設置 defaultValue 或 value 並不能解決您的問題