React-Bootstrap FormControl 选择未显示值

Question

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

1. 该值正在保存在状态中，但名称值不会显示在选择表单中。
2. 如果我尝试将选项的值更改为“list.firstname”。我得到显示的值，但 onchange 函数给我的是名称而不是 id。我需要 ID 才能选择准确的记录。

Answer 1

您的代码中有几个错误，请考虑更正的版本：

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>

总结一下关键的问题，修复了什么：

• 您使用 single=而不是==insideif(...语句
• 您尝试直接this.state.object在 -body 中分配属性if(..，而setState()应该使用
• 您用作this.state.object.namea value，而数据对象的结构中没有这样的属性