Question

我是新手，

我正在使用卡片，当卡片“点击”时，我需要获取卡片对象并将其动态放置在表单中，

（完整代码）我的代码：

// reactstrap components
import {useState} from "react"
import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  Col,
  Input,
  FormGroup,
  Form,
  Container,
  Row,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownItem,
  DropdownMenu,
  Button,
} from "reactstrap";


import Header from "components/Headers/Header.js";
  import 'react-toastify/dist/ReactToastify.css';
import Navbar from "components/Navbars/modulenavbar"


import axios from "axios";
import React from "react";
import { Link } from "react-router-dom";
var apitoken= localStorage.getItem('apitoken');
const api=axios.create({baseURL:"https://api/v1/account"})
const options = {
  headers: {'Authorization': apitoken}
}




const Accounts = () => {
  const [accounts, setaccount] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [disabled, setDisabled] = useState(false);
  React.useEffect(async () => {
    const response = await api.get("/",options);
    setaccount(response.data.response);
    setLoading(false);
  }, []); 
  if (loading) {
    return <>Loading...</>;
  }
  function handleGameClick() {
    setDisabled(!disabled);
  }


This is were i get all my api value and append it
  return (
    <>
    
      {accounts.map((student, index) => {
        const { id, name, phone, email } = student //destructuring
        return (
          <>
          <div style={{ width: "18rem" }} onClick={() => console.log(student)}>

我想传递对象“Student”并在下面显示的表单的默认值中使用它


          <Card className="card-stats mb-4 mb-lg-1">
            <CardBody>
              <Row>
                <div className="col">
                  <CardTitle className="h4 font-weight-bold mb-0">
                    {name}
                  </CardTitle>
                  <span className="h5">{phone}</span>
                  
                </div>
                <div  className="col">
                <span className="h5">{email}</span>
                </div>
              
              </Row>
            
            </CardBody>
          </Card>
        </div>
      </>
        )
      })}
    </>
  )
}

此处显示表单

const Display = () => {
 return (
  <>

  <Header />
  <Container className="mt--7" fluid>
    {/* Table */}
    <Row>
    <Col className="order-xl-1 " xl="2">
    <CardHeader className="bg-white border-0">
              <Row className="align-items-center">
                <Col xs="8">
      
        <Link to="/admin//accounts" className="ni ni-bold-left">

              <span> View Account</span></Link>
                </Col>
     
     </Row>
     
     </CardHeader>
    <Card className="bg-secondary shadow navbar-nav-scroll">
      
           
     <Accounts/>
     </Card>
      </Col>
      <Col className="order-xl-1" xl="10">
    <Card className="bg-secondary shadow">
    <Navbar/>
          
              <Row >

              <Col className="shadow navbar-nav-scroll">
     




<Form>
                <h6 className="heading-small text-muted mb-4">
                  Account Information
                </h6>
                <div className="pl-lg-4">
                  <Row>
                    <Col >
                      <FormGroup>
                        <label
                          className="form-control-label"
                          htmlFor="input-username"
                        >
                          Account Name
                        </label>
                        <Input
                          className="form-control-alternative"
                          
                          id="input-username"
                          placeholder="Username"
                          type="text"
defaultValue={student.value}
                        />
                      </FormGroup>
                    </Col>
                 
                  </Row>
                  <Row>
                  <Col >
                      <FormGroup>
                        <label
                          className="form-control-label"
                          htmlFor="input-email"
                        >
                          Email address
                        </label>
                        <Input
                          className="form-control-alternative"
                          id="input-email"
                          placeholder="jesse@example.com"
                          type="email"
                        />
                      </FormGroup>
                    </Col>
                    </Row>
                    <Row>
                    <Col >
                      <FormGroup>
                        <label
                          className="form-control-label"
                          htmlFor="input-email"
                        >
                          Phone
                        </label>
                        <Input
                          className="form-control-alternative"
                          id="input-phone"
                          placeholder="Phone"
                          type="text"
                        />
                      </FormGroup>
                    </Col>
                    </Row>
                
                </div>
               
              </Form>

    </Col>
    <Col xs="9">
   
   

    <Card className="card-stats mb-4 mb-lg-0">
            <CardBody>

              
             <div>
           
           
              <Row className="align-items-center">
                <Col xs="8">
                 
                </Col>
                <Col className="text-right" xs="4">
                  <Button
                    color="success"
                    href="#pablo"
                    // onClick={save}
                    
                  >
                    Save
                  </Button>
                </Col>
              </Row>
            
             </div>
            </CardBody>
          </Card>


    </Col>
               
     
     </Row>
    
     </Card>
      </Col>
    </Row>
   
  </Container>
</>
  );
};

export default Display;

注意：以上三段代码在单个组件中

我只想在“点击”事件期间动态附加来自对象的值

提前致谢

Answer 1

您可以将点击的学生值存储在 state 中，并将其作为 props 传递给任何需要它的组件

const Accounts = () => {
  const [selectedStudent, setSelectedStudent] = useState({});
  ...

  const handleStudentClick = (student) => {
     setSelectedStudent(student)
  }

  return (
    <>
    
      {accounts.map((student, index) => {
        const { id, name, phone, email } = student //destructuring
        return (
          <>
          <div style={{ width: "18rem" }} onClick={() => handleStudentClick(student)}>

现在您可以将选定的学生作为道具传递给您的子组件

在 onclick 事件期间传递 React.JS 对象

1 个答案: