React - 如何将数组的第一个值显示为 select 形式的默认值？

Question

我正在尝试将数组中第一个对象的属性显示为默认项。当我尝试提交我的表单时，我得到了一个空值，因为我没有参与它。我如何确保该值存在？我正在使用 react-bootstrap。以下是代表此问题的代码片段：

重点来了，不知道在value字段里放什么。我想要的是引用 id 值，如果我的数组中只有一项，我不必打开下拉列表，id 已经在那里：

<Form.Control as="select" value={WHAT DO I DO HERE??} onChange={props.handleCart}>
   {props.carts.map((cart,i) => <option key={cart.id} value={cart.id}>{cart.cart_name</option>)})                 
</Form.Control>

Home.js

constructor() {
        super();
        this.state = {
    myCarts = [
    {'id':'1', 'cart_name': 'my cart 1'},
    {'id':'2', 'cart_name': 'my cart 2'}
    ],
showMenu: false
}
}

...

Return
<Create
showMenu = {this.state.showMenu}
menuModalToggle={this.menuModalToggle} 
carts = {this.state.carts}
/>

Create.js

const CreateMenuModal = (props) => {
    console.log('props carts there?',props.carts);
    return (
            <Modal
            //dialogClassName={classes.modal}
            show={props.showMenu}
            onHide={props.menuModalToggle}
            >
                 <Modal.Header closeButton>
                    <Modal.Title>Create Menu</Modal.Title>
                </Modal.Header>
                <div style={{ textAlign: 'center', padding: 10 }}>
                    Fill out the following details to create menus for your cart. Once you create a menu you will have the option to add and remove items from that menu.
                    </div>
                <Modal.Body>
                    <Form>
                        <Form.Group controlId="cart_check">
                            <Form.Label>Choose which cart this menu is for:</Form.Label>
                            <Form.Control as="select" value={WHAT DO I DO HERE??} onChange={props.handleCart}>
                            
                                   {props.carts.map((cart,i) => <option key={cart.id} value={cart.id}>{cart.cart_name}</option>)})
                    
                            </Form.Control>
                        </Form.Group>
                        <Form.Group controlId="menu_name">
                            <Form.Label>Enter a name for your menu:</Form.Label>
                            <Form.Control
                                required placeholder="My Menu" name="menu_name" type="email" onChange={props.handleChange} value={props.menu_name} 
                            />
                        </Form.Group>

                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={props.menuModalToggle}>Cancel</Button>
                    <Button variant="primary" onClick={props.createMenu}>Add Menu</Button>
                </Modal.Footer>
        
            </Modal>

    )
}

提交代码示例如下：

  //CREATE A MENU
        createMenu = () => {
            console.log('create menu with:', this.state.cart_id, this.state.menu_name);
            this.setState({ showMenu: !this.state.showMenu, menuAdded: !this.state.menuAdded });
            let sqlStamp = moment().utcOffset('-0400').format("YYYY-MM-DD HH:mm:ss").substr(0, 18) + '0';
            fetch(
                `${global.api}/addMenu?cart_id=${this.state.cart_id}&menu_name=${this.state.menu_name}&time_joined=${sqlStamp}`,
                { method: "POST" }
            ).catch((error) => {
                console.log(error)
            })
        }

Answer 1

你能试试默认值吗form-control-props

<Form.Control
  as="select"
  value={props.carts[0].id.toString()}
  defaultValue={props.carts[0].id.toString()}
  onChange={props.handleCart}
>
  {props.carts.map((cart,i) => (
    <option key={cart.id} value={cart.id}> 
       {cart.cart_name}
    </option>
  ))}
</Form.Control>

React - 如何将数组的第一个值显示为 select 形式的默认值？

React - How do I display the first value of an array as the default value in a select form?

javascript

arrays

reactjs

react-bootstrap