时间戳

首页 > 解决方案 > 我在这个 Nav.Link 上的 onSubmit/handleSubmit 方法有什么问题？

reactjs - 我在这个 Nav.Link 上的 onSubmit/handleSubmit 方法有什么问题？

问题描述

import React, { Fragment } from "react";
import { Container, ListGroup, Card, Button, Row, Col, Nav } from "react-bootstrap";
import Footer from "../Footer";

export const Dashboard = props => {
  let selectedOption = "";
  const handleSelect = evt => {
    evt.preventDefault();
    selectedOption = evt.target.name;
    console.log(evt.target.name);
  };

  //Figure out how to get username from headers
  return (
    <div style={{ textAlign: "center" }}>
      <Container>
        <Row>
          <Col lg={4} xs={4}>
            <Card style={{ width: "18rem" }}>
              <Card.Img variant="top" src="https://www.brandeps.com/icon-download/U/User-icon-vector-01.svg" />
              <Card.Body>
                <Card.Title>[Username]</Card.Title>
                <Card.Text>[Account Info]</Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          </Col>
          <Col lg={8} xs={8}>
            <Nav justify variant="tabs" defaultActiveKey="/home">
              <Nav.Item>
                <Nav.Link name="paymentInfo" onSelect={evt => handleSelect(evt)}>
                  Modify Payment Info
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link name="bankInfo" onSelect={evt => handleSelect(evt)}>
                  Modify Bank Info
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link name="withdrawal" onSelect={evt => handleSelect(evt)}>
                  Make A Withdrawal
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link onSelect={evt => handleSelect(evt)}>???</Nav.Link>
              </Nav.Item>
            </Nav>
            {selectedOption === "paymentInfo" && console.log("object")}
          </Col>
        </Row>
      </Container>
      <Footer />
    </div>
  );
};

所以我最终想基本上在我设置的导航下方填充一个很好的连接菜单，但我似乎无法正确实现onSelect事件侦听器或handleSelect方法。现在我只想让它控制台记录“对象”这个词，以确保它真正触发。

知道我做错了什么吗？

标签： reactjsreact-bootstrap

解决方案

问题是链接具有onClick属性，onSelect因此您可以尝试：

export const Dashboard = props => {
  let selectedOption = "";
  const handleSelect = evt => {
    evt.preventDefault();
    selectedOption = evt.target.name;
    console.log(evt.target.name);
  };

  //Figure out how to get username from headers
  return (
    <div style={{ textAlign: "center" }}>
      <Container>
        <Row>
          <Col lg={4} xs={4}>
            <Card style={{ width: "18rem" }}>
              <Card.Img variant="top" src="https://www.brandeps.com/icon-download/U/User-icon-vector-01.svg" />
              <Card.Body>
                <Card.Title>[Username]</Card.Title>
                <Card.Text>[Account Info]</Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          </Col>
          <Col lg={8} xs={8}>
            <Nav justify variant="tabs" defaultActiveKey="/home">
              <Nav.Item>
                <Nav.Link name="paymentInfo" onClick={evt => handleSelect(evt)}>
                  Modify Payment Info
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link name="bankInfo" onClick={evt => handleSelect(evt)}>
                  Modify Bank Info
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link name="withdrawal" onClick={evt => handleSelect(evt)}>
                  Make A Withdrawal
                </Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link onClick={evt => handleSelect(evt)}>???</Nav.Link>
              </Nav.Item>
            </Nav>
            {selectedOption === "paymentInfo" && console.log("object")}
          </Col>
        </Row>
      </Container>
      <Footer />
    </div>
  );
};

我希望它有效。

推荐阅读