在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'}
答案 0 :(得分：8)
我没有对此进行测试，但是从React Bootstrap source code for FormControl开始，似乎使用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>
答案 1 :(得分：0)
对于"react-bootstrap": "1.0.0-beta.14"，使用value道具：
<Form.Control as="select" value={user}>
{ users.map(opt => (<option>{ opt }</option>)) }
</Form.Control>
答案 2 :(得分：0)
这样，您可以设置默认值。
{
"name": "custom-view-samples",
"displayName": "Custom view Samples",
"description": "Samples for VSCode's view API",
"version": "0.0.1",
"publisher": "vscode-samples",
"enableProposedApi": true,
"engines": {
"vscode": "^1.46.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onView:nodeDependencies",
"onView:ftpExplorer",
"onView:jsonOutline",
"onView:fileExplorer",
"onView:testView",
"onLanguage:json",
"onLanguage:jsonc",
"onCommand:testView.reveal"
],
"main": "./out/extension.js",
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "package-explorer",
"title": "Package Explorer",
"icon": "media/dep.svg"
}
]
},
"views": {
"package-explorer": [
{
"id": "nodeDependencies",
"name": "Node Dependencies",
"icon": "media/dep.svg",
"contextualTitle": "Package Explorer"
}
]
},
"commands": [
{
"command": "nodeDependencies.refreshEntry",
"title": "Refresh",
"icon": {
"light": "resources/light/refresh.svg",
"dark": "resources/dark/refresh.svg"
}
},
{
"command": "nodeDependencies.addEntry",
"title": "Install"
},
{
"command": "nodeDependencies.editEntry",
"title": "Uninstall",
"icon": {
"light": "resources/light/edit.svg",
"dark": "resources/dark/edit.svg"
}
},
{
"command": "nodeDependencies.deleteEntry",
"title": "Upgrade"
},
{
"command": "ftpExplorer.refresh",
"title": "Refresh",
"icon": {
"light": "resources/light/refresh.svg",
"dark": "resources/dark/refresh.svg"
}
},
{
"command": "ftpExplorer.openFtpResource",
"title": "Open FTP Resource"
},
{
"command": "ftpExplorer.revealResource",
"title": "Reveal in FTP View"
},
{
"command": "jsonOutline.refresh",
"title": "Refresh",
"icon": {
"light": "resources/light/refresh.svg",
"dark": "resources/dark/refresh.svg"
}
},
{
"command": "jsonOutline.refreshNode",
"title": "Refresh",
"icon": {
"light": "resources/light/refresh.svg",
"dark": "resources/dark/refresh.svg"
}
},
{
"command": "jsonOutline.renameNode",
"title": "Rename"
},
{
"command": "fileExplorer.refreshFile",
"title": "Refresh",
"icon": {
"light": "resources/light/refresh.svg",
"dark": "resources/dark/refresh.svg"
}
},
{
"command": "fileExplorer.openFile",
"title": "Open File"
},
{
"command": "testView.reveal",
"title": "Test View: Reveal"
},
{
"command": "testView.changeTitle",
"title": "Test View: Change Title"
}
],
"menus": {
"commandPalette": [
{
"command": "ftpExplorer.revealResource"
}
],
"view/title": [
{
"command": "nodeDependencies.refreshEntry",
"when": "view == nodeDependencies",
"group": "navigation"
},
{
"command": "nodeDependencies.installEntry",
"when": "view == nodeDependencies"
},
{
"command": "jsonOutline.refresh",
"when": "view == jsonOutline",
"group": "navigation"
},
{
"command": "ftpExplorer.refresh",
"when": "view == ftpExplorer",
"group": "navigation"
}
],
"view/item/context": [
{
"command": "nodeDependencies.editEntry",
"when": "view == nodeDependencies && viewItem == dependency",
"group": "inline"
},
{
"command": "nodeDependencies.deleteEntry",
"when": "view == nodeDependencies && viewItem == dependency"
},
{
"command": "jsonOutline.renameNode",
"when": "view == jsonOutline"
},
{
"command": "jsonOutline.refreshNode",
"when": "view == jsonOutline",
"group": "inline"
},
{
"command": "fileExplorer.refreshFile",
"when": "view == fileExplorer && viewItem == file",
"group": "inline"
}
]
},
"configuration": [
{
"title": "JSON Outline",
"properties": {
"jsonOutline.autorefresh": {
"type": "boolean",
"default": false
}
}
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"lint": "eslint . --ext .ts,.tsx"
},
"devDependencies": {
"@types/mkdirp": "^0.5.2",
"@types/node": "^12.12.0",
"@types/rimraf": "^2.0.2",
"@types/vscode": "^1.45.0",
"typescript": "^4.0.2",
"@typescript-eslint/eslint-plugin": "^3.0.2",
"@typescript-eslint/parser": "^3.0.2",
"eslint": "^7.1.0"
},
"dependencies": {
"jsonc-parser": "^0.4.2",
"ftp": "^0.3.10",
"mkdirp": "^0.5.1",
"rimraf": "^2.6.2",
"minimist": "^0.2.1"
}
}
您可能在控制台中收到错误：
警告：启用 <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设置为。
但是设置defaultValue或value不能解决您的问题