React-Bootstrap FormControl select 没有得到显示的值
React-Bootstrap FormControl select not getting the value displayed
import { Form } from 'react-bootstrap'
const nameArray = [
{
"id": 52655,
"firstName": "raj",
"lastName": "",
"primaryAddress": "sad"
},
{
"id": 52656,
"firstName": "SubbaRaju",
"lastName": "ch",
"primaryAddress": "kphb"
},
{
"id": 52667,
"firstName": "Ravi",
"lastName": "Varma",
"primaryAddress": "Hyderabad"
}
]
export default class File extends Component {
constructor(props) {
super(props);
this.state = {
object: {
name: "",id:0
}
}
}
nameChange = (value) => {
console.log(value)
for(let i=0 ; i < nameArray.length; i++){
if(value = nameArray[i].id){
this.state.object.name = nameArray[i].firstName
this.state.object.id = nameArray[i].id
}
}
this.setState({object:this.state.object})
}
render() {
return (
<div>
<Form>
<Form.Group>
<Form.Label className="Font">Name</Form.Label>
<Form.Control
value={(this.state.object.name) ? this.state.object.name : -1}
onChange={(e) => this.nameChange(e.target.value)}
className="Inputstyle"
as="select"
>
<option disabled value={-1} key={-1}>select</option>
{nameArray.map(list =>
<option key={list.id} value={list.id}>{list.firstName}</option>)}
</Form.Control>
</Form.Group>
</Form>
</div>
)
}
}
- 值正在保存在状态中,但名称值未显示在 select 表单中。
- 如果我尝试将选项的值更改为 "list.firstname"。我得到了显示的值,但是 onchange 函数给我的是名称而不是 id。我需要 id 才能获得准确的记录 selected.
您的代码中有几个错误,请考虑更正版本:
const { Form } = ReactBootstrap,
{ Component } = React,
{ render } = ReactDOM
const nameArray = [{"id":52655,"firstName":"raj","lastName":"","primaryAddress":"sad"},{"id":52656,"firstName":"SubbaRaju","lastName":"ch","primaryAddress":"kphb"},{"id":52667,"firstName":"Ravi","lastName":"Varma","primaryAddress":"Hyderabad"}]
class File extends Component {
constructor(props) {
super(props);
this.state = {
object: {
name:null,
id:null
}
}
this.nameChange = this.nameChange.bind(this)
}
nameChange(value) {
for(let i=0 ; i < nameArray.length; i++){
if(value == nameArray[i].id){
this.setState({object:{
name: nameArray[i].firstName,
id: nameArray[i].id
}})
break
}
}
}
render() {
return (
<div>
<Form>
<Form.Group>
<Form.Label className="Font">Name</Form.Label>
<Form.Control
value={this.state.object.id}
onChange={(e) => this.nameChange(e.target.value)}
className="Inputstyle"
as="select"
>
<option disabled selected value="" key={-1}>select</option>
{
nameArray.map(list => (
<option
key={list.id}
value={list.id}
label={list.firstName}
/>
))
}
</Form.Control>
</Form.Group>
</Form>
</div>
)
}
}
render (<File />, document.getElementById('root'))
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>
为了总结关键问题,已修复的内容:
- 您在
if(...
语句中使用了单个 =
而不是 ==
- 您试图在
if(..
-body 中直接分配 this.state.object
属性,而应该使用 setState()
- 您将
this.state.object.name
用作 value
,而在您的数据对象的结构中没有 属性
import { Form } from 'react-bootstrap'
const nameArray = [
{
"id": 52655,
"firstName": "raj",
"lastName": "",
"primaryAddress": "sad"
},
{
"id": 52656,
"firstName": "SubbaRaju",
"lastName": "ch",
"primaryAddress": "kphb"
},
{
"id": 52667,
"firstName": "Ravi",
"lastName": "Varma",
"primaryAddress": "Hyderabad"
}
]
export default class File extends Component {
constructor(props) {
super(props);
this.state = {
object: {
name: "",id:0
}
}
}
nameChange = (value) => {
console.log(value)
for(let i=0 ; i < nameArray.length; i++){
if(value = nameArray[i].id){
this.state.object.name = nameArray[i].firstName
this.state.object.id = nameArray[i].id
}
}
this.setState({object:this.state.object})
}
render() {
return (
<div>
<Form>
<Form.Group>
<Form.Label className="Font">Name</Form.Label>
<Form.Control
value={(this.state.object.name) ? this.state.object.name : -1}
onChange={(e) => this.nameChange(e.target.value)}
className="Inputstyle"
as="select"
>
<option disabled value={-1} key={-1}>select</option>
{nameArray.map(list =>
<option key={list.id} value={list.id}>{list.firstName}</option>)}
</Form.Control>
</Form.Group>
</Form>
</div>
)
}
}
- 值正在保存在状态中,但名称值未显示在 select 表单中。
- 如果我尝试将选项的值更改为 "list.firstname"。我得到了显示的值,但是 onchange 函数给我的是名称而不是 id。我需要 id 才能获得准确的记录 selected.
您的代码中有几个错误,请考虑更正版本:
const { Form } = ReactBootstrap,
{ Component } = React,
{ render } = ReactDOM
const nameArray = [{"id":52655,"firstName":"raj","lastName":"","primaryAddress":"sad"},{"id":52656,"firstName":"SubbaRaju","lastName":"ch","primaryAddress":"kphb"},{"id":52667,"firstName":"Ravi","lastName":"Varma","primaryAddress":"Hyderabad"}]
class File extends Component {
constructor(props) {
super(props);
this.state = {
object: {
name:null,
id:null
}
}
this.nameChange = this.nameChange.bind(this)
}
nameChange(value) {
for(let i=0 ; i < nameArray.length; i++){
if(value == nameArray[i].id){
this.setState({object:{
name: nameArray[i].firstName,
id: nameArray[i].id
}})
break
}
}
}
render() {
return (
<div>
<Form>
<Form.Group>
<Form.Label className="Font">Name</Form.Label>
<Form.Control
value={this.state.object.id}
onChange={(e) => this.nameChange(e.target.value)}
className="Inputstyle"
as="select"
>
<option disabled selected value="" key={-1}>select</option>
{
nameArray.map(list => (
<option
key={list.id}
value={list.id}
label={list.firstName}
/>
))
}
</Form.Control>
</Form.Group>
</Form>
</div>
)
}
}
render (<File />, document.getElementById('root'))
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script><div id="root"></div>
为了总结关键问题,已修复的内容:
- 您在
if(...
语句中使用了单个=
而不是==
- 您试图在
if(..
-body 中直接分配this.state.object
属性,而应该使用setState()
- 您将
this.state.object.name
用作value
,而在您的数据对象的结构中没有 属性