javascript 为react-bootstrap的FormControl指定默认值

nr9pn0ug  于 2023-08-02  发布在  Java
关注(0)|答案(4)|浏览(111)

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

mm5n2pyu

mm5n2pyu1#

我没有测试这个,但从React Bootstrap source code for FormControl来看,使用defaultValue prop应该可以工作:

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

wfveoks0

wfveoks02#

对于"react-bootstrap": "1.0.0-beta.14",使用value属性:

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

字符串

kb5ga3dv

kb5ga3dv3#

(Hi googlers!)
如果你试图加载一个选项数组到表单控件中(通过网络调用,promise或其他异步函数),请确保在选项数组完全加载之前不要呈现Select字段。否则defaultValue将不起作用。
(True对于react-bootstrap 1.0.0-beta.8。你的里程数可能会很谨慎。)

jvlzgdj9

jvlzgdj94#

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

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

字符串
您可能会在控制台中收到错误:
警告:使用defaultValuevalue prop ,而不是设置selected
但是设置defaultValue或value并不能解决您的问题

相关问题