Question

我正在尝试将单击的元素的值传递给标题组件。我使用 React-bootstrap 提供的模态做到了这一点。父组件（header）应该接收被点击的元素的值（在子组件中）并显示在位置（状态）中。我已经花太多时间在这上面了。

❯ mvn dependency:tree -Dincludes="org.apache.htrace*"          
[INFO] Scanning for projects...
[INFO] 
[INFO] ------------------------< com.s****m.**:s****s >-------------------------
[INFO] Building s*****s 1.21.0-SNAPSHOT
[INFO] --------------------------------[ jar ]---------------------------------
[INFO] 
[INFO] --- maven-dependency-plugin:3.0.2:tree (default-cli) @ s****s ---
[INFO] com.s****m.**:s****s:jar:1.0.0-SNAPSHOT
[INFO] \- org.apache.hadoop:hadoop-client:jar:2.8.3:compile
[INFO]    \- org.apache.hadoop:hadoop-common:jar:2.8.3:compile
[INFO]       \- org.apache.htrace:htrace-core4:jar:4.0.1-incubating:compile
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  1.676 s
[INFO] Finished at: 2020-04-27T11:57:11-03:00
[INFO] ------------------------------------------------------------------------

位置模式

如您所见，我尝试为从子元素（locationModal）获取的值编写一个回调函数，以便将其传递并显示在父组件（Header）中。

import React, {useState} from 'react'
import { Navbar, Container, Button } from 'react-bootstrap'
import {
  faMapMarkerAlt, 
  faAngleDown
  } from "@fortawesome/free-solid-svg-icons";
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import LocationModal from '../LocationModal/LocationModal';



export default function Header () {
    const [modalShow, setModalShow] = useState(false)
    const [location, setLocation] = useState('Lagos')
    const handleCallback = () => {
        setLocation({location})
     }
     
    return (
        <>
        <Navbar expand="lg" variant="light" bg="light">
            <Container>
                <Navbar.Brand href="/">Navbar</Navbar.Brand>
                <Button variant="none" onClick={() => setModalShow(true)} className="px-2 d-inline-flex">
                    <span className="ml-1"><FontAwesomeIcon icon={faMapMarkerAlt} /></span>
                    <span className="ml-1">{location}</span>
                    <span className="ml-1"><FontAwesomeIcon icon={faAngleDown} /></span>
                </Button>
                
            </Container>
        </Navbar>
        <LocationModal 
            show={modalShow}
            onHide={() => setModalShow(false)}
            parentcallback={handleCallback} 
        />
        </>
    )
}

非常感谢。

Answer 1

在您的 CSV (MS-DOS) (*.csv) 处，您将状态设置为带有 handleCallback 键的对象，但您的位置状态应该是一个字符串。您还缺少位置参数：

location

应该是这样的：

const handleCallback = () => { // you are missing location param
    setLocation({location}) // location was a string now is an object
 }

但这实际上是多余的，const handleCallback = (location) => setLocation(location) 已经做了同样的 handleCallback。删除 setLocation 代码并将 handleCallback 传递给 setLocation：

parentcallback

单击列表项时如何将数据从子项传递给父项

1 个答案: