我是新来的反应,我有一个问题,也许很简单,但我还无法弄清楚。
我有一个调用const组件子组件的const组件父组件,我想要的是将值从父组件传递给子组件,如果值在子组件中被编辑,父组件可以访问编辑后的值。
我想要的是这个,下面的const组件是子组件,它只是渲染一个地图,如果您单击它设置const selectedPotionwith经度和纬度,我希望const组件父组件传递经度和纬度的初始值,每次在子组件中编辑时,父组件都会获得该值:
import React from 'react'
import {MapContainer, Marker,TileLayer,Popup, useMapEvents } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
const MapView = () =>{
const [initialPosition, setInitialPosition] = React.useState([0,0]);
const [selectedPosition, setSelectedPosition] = React.useState([0,0]);
const Markers = () => {
const map = useMapEvents({
click(e) {
setSelectedPosition([
e.latlng.lat,
e.latlng.lng
]);
},
})
return (
selectedPosition ?
<Marker
key={selectedPosition[0]}
position={selectedPosition}
interactive={false}
/>
: null
)
}
return <MapContainer center={selectedPosition || initialPosition} zoom={5}
style={{height:"200px",width:"500px"}}>
<TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
></TileLayer>
<Markers />
</MapContainer>
}
export default MapView
const组件父级如下所示:
const Locations = () => {
....
return (
<MapView />
)
}
我怎样才能做到这一点?这是正确的做法吗?或者我应该使用类组件吗?谢谢!
您可以在父级中使用 useState 并将其传递给子级。
示例:
位置(父)
const Locations = () => {
const [myState, setMyState] = useState("something")
return (
<MapView setMyState={setMyState}/>
)
地图视图(儿童)
const MapView = ({setMyState}) => {
const handleClick = () => {
setMyState("something else")
}
return (
<button onClick={handleClick> click </button>
)
}
以一种反应方式,你应该把道具举到父母面前component.Hope这会很有帮助!
const MapView = ({selectedPosition,setSelectedPosition}) =>{
const Markers = () => {
const map = useMapEvents({
click(e) {
setSelectedPosition([
e.latlng.lat,
e.latlng.lng
]);
},
})
return (
selectedPosition ?
<Marker
key={selectedPosition[0]}
position={selectedPosition}
interactive={false}
/>
: null
)
}
return <MapContainer center={selectedPosition} zoom={5}
style={{height:"200px",width:"500px"}}>
<TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
></TileLayer>
<Markers />
</MapContainer>
}
const Locations = () => {
const [selectedPosition, setSelectedPosition] = React.useState([0,0]);
return (
<MapView selectedPosition={selectedPosition} setSelectedPosition={setSelectedPosition} />
)
}
问题内容: 我有两个组成部分: 第一个是父组件,它是通常的React组件。 第二个是孩子,它是功能组件。 我想将 Titles 的值(处于子状态)传递给父Component。这是我的 子组件 代码: 这是我的 父组件 : 这看起来很容易,但这是我第一次使用功能组件。你能帮我吗 ? 问题答案: React就是关于在组件树中向下流动的数据。如果您希望能够显示和/或修改彼此之间的共享状态,则应提升状态并
有一个父组件 A,上面有两个子组件,B 和 C。 在子组件 B 上有一个子组件 D,其中 D 里面有一个 textarea 在子组件 C 上有一个按钮,点击这个按钮获取 D 里面 textarea 的值。 我尝试的两个方案 方案一:可以通过直接操作 dom 来解决 方案二:通过 D 将 textarea 的值传递给 B,然后由 B 传给 A,再有 A 传给 C,但总是传不成功。 请问我的这个需求,
问题内容: 在我正在从事的新项目中,我开始使用组件而不是指令。 但是,我遇到一个无法找到具体标准方法的问题。 从孩子向父母通知事件很容易,您可以在下面的我的plunkr上找到它,但是从父母向孩子通知事件的正确方法是什么? Angular2似乎通过使用以下方法解决了此问题:https ://angular.io/docs/ts/latest/cookbook/component-communicat
因此,我想向附加到组件的任何子级添加某些样式。假设父组件称为,子组件称为。在我正在尝试以下方法:- 上述方法对我不起作用。我想知道为什么。还有没有一种方法可以让我在孩子们之间绘制地图,并将他们包装在一个新的组件中?像这样的东西;
问题内容: 我正在学习,并尝试使用它开发小型表单。在这一点上,我试图从其他设置执行更新。 所以,如果我上的网格,并输入框应该得到和值分别为。 我已经成功地执行和操作,但我不知道我该怎么设置值是在输入框编辑从同级组件。如果您什么都不懂,请告诉我,因为我刚刚开始学习,我知道我的代码不符合要求。 问题答案: 这是一个列表编辑应用程序示例,其中,通过父输入(很容易成为兄弟姐妹)完成项目内容的编辑。 这是一
我想访问