React - 映射 props 值時從 Form 定位值的問題

Question

我希望能夠從使用 React Bootstrap 組件傳遞道具的子組件中的表單中選擇一個項目。 似乎無法讓它工作。 當我選擇項目時，我記錄的是 div 而不是目標<select>{props.data.map((x,y) => <option key={y}>{x}</option>)}</select>; 所以我不能設置我的狀態項。

過程：我按下一個按鈕，一個 react-bootstrap 模式打開，我可以輸入輸入並從表單中選擇。

以下是相關代碼片段：

片段我認為我需要修復：

<Form>
                        <Form.Group controlId="cart_check">
                            <Form.Label>Choose which cart this menu is for:</Form.Label>
                            <Form.Control as="select" value={props.carts.id} onChange={props.handleCart}>
                                
                                   {props.carts.map((cart,i) => <option key={cart.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="Menu Name" name="name" type="name" onChange={props.handleChange} value={props.menu_name}
                            />
                        </Form.Group>

                    </Form>

菜單.js

class Menu extends Component {
    constructor() {
        super();
        this.state = {
            user: auth().currentUser,
            value: 'enter',
            showMenu: false,
            createMenu:false,
            cart_id:null,
            menu_name:null,
           
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleCart = this.handleCart.bind(this);
    }

    ....

    handleChange(event) {
        console.log(event.target.value)
        this.setState({
          [event.target.name]: event.target.value
        });
      }

      handleCart = (event) => {
        console.log(event.target);
        console.log('cart selected', this.state.cart_id);
        this.setState({ city_id: event.target.value });
      }


    render() {
            }
        return (

            <Container>
                <Header />
                {this.state.showMenu  && 
                    <CreateMenuModal
                        toggleMenuCreate={this.toggleMenuCreate}
                        carts={this.props.reducer.carts}
                        handleChange={this.handleChange}
                        handleCart={this.handleCart}
                        createMenu={this.createMenu}
                        menu_name={this.state.menu_name}
                        cart_id={this.state.cart_id}

                    />}
                <div className={classes.summary}>
                    <div>Below you will see your listed menus for all carts you have registered in our system. Every cart is allowed one menu at the moment.</div>
                </div>

                <Row>
                    <Col>
                        <Button onClick={()=>this.toggleMenuCreate()}>
                            Create Menu
                </Button>


            </Container>
        );
    }
}

...

創建MenuModal.js

import React, { Component } from 'react';
import { Modal, Button, Form } from 'react-bootstrap';
import classes from './menuItem.module.css';


const CreateMenuModal = (props) => {

    return (
        <div>
            <Modal.Dialog>
                <Modal.Header closeButton>
                    <Modal.Title>Create Menu</Modal.Title>
                </Modal.Header>
             
                <Modal.Body>
                    <Form>
                        <Form.Group controlId="cart_check">
                            <Form.Label>Choose which cart this menu is for:</Form.Label>
                            <Form.Control as="select" value={props.carts.id} onChange={props.handleCart}>
                                
                                   {props.carts.map((cart,i) => <option key={cart.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="Menu Name" name="name" type="name" onChange={props.handleChange} value={props.menu_name}
                            />
                        </Form.Group>

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

export default CreateMenuModal;

Answer 1

• 您的<option>標簽沒有價值。
• 它應該是<option key={cart.cart_id} value={cart.cart_id}>{cart.cart_name}</option>)}

演示代碼：

import React,{Component} from "react";
import { Form } from "react-bootstrap";

export default class App extends Component {
  onChangeColor = (event) => console.log(event.target.value);

  render() {
    return (
      <div>
        Simple select element of react-bootstrap
        <hr />
        Select any color :
        <Form.Control as="select" onChange={this.onChangeColor}>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
          <option value="green">Green</option>
          <option value="black">Black</option>
          <option value="orange">Orange</option>
        </Form.Control>
      </div>
    );
  }
}
`