Javascript 反应-映射道具值时表单中的目标值出现问题

我希望能够从使用React引导组件传递道具的子组件中的表单中选择一个项。似乎无法让它工作。当我选择该项时，我记录的是div而不是target

{props.data.map（（x，y）=>{x}）因此我无法设置我的状态项

过程：我按下一个按钮，react引导模式打开，我可以输入并从表单中选择

以下是相关代码的片段：

我想我需要修复的代码片段：

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


选择此菜单用于哪个购物车：
{props.carts.map（（cart，i）=>{cart.cart\u name}）
输入菜单的名称：

Menu.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>
        );
    }
}

...

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;

类菜单扩展组件{
构造函数（）{
超级（）；
此.state={
用户：auth（）.currentUser，
值：“输入”，
showMenu:false，
createMenu:false，
购物车id:null，
菜单名称：空，
};
this.handleChange=this.handleChange.bind（this）；
this.handleCart=this.handleCart.bind（this）；
}
....
手变（活动）{
console.log（event.target.value）
这是我的国家({
[event.target.name]：event.target.value
});
}
handleCart=（事件）=>{
console.log（event.target）；
console.log（'cart selected'，this.state.cart\u id）；
this.setState（{city_id:event.target.value}）；
}
render（）{
}
返回(
{this.state.showMenu&&
}
下面您将看到您在我们的系统中注册的所有购物车的列表菜单。每个购物车目前允许一个菜单。
this.toggleMenuCreate（）}>
创建菜单
);
}
}
...

CreateMenuModal.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>
        );
    }
}

...

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;

import React，{Component}来自'React'；
从“react bootstrap”导入{Modal，Button，Form}；
从“/menuItem.module.css”导入类；
const CreateMenuModal=（道具）=>{
返回(
创建菜单
选择此菜单用于哪个购物车：
{props.carts.map（（cart，i）=>{cart.cart\u name}）
输入菜单的名称：
取消
添加菜单
)
}
导出默认CreateMenuModal；

您的
标记没有值
它应该是
{cart.cart\u name}

演示代码：

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

import React，{Component}来自“React”；
从“react bootstrap”导入{Form}；
导出默认类应用程序扩展组件{
onChangeColor=（事件）=>console.log（event.target.value）；
render（）{
返回(
react引导的简单select元素

选择任意颜色：
红色
蓝色
绿色
黑色
橙色
);
}
}
`
你能用
event.currentTarget
代替
event.target
看看会发生什么吗？我试过
console.log（event.currentTarget.value）
它返回
cart.cart\u name
我想要的是
cart.cart\u id
{cart.cart\u name}的值
你应该添加值