Javascript 挂钩回调-反应

我目前正在构建一个react应用程序，它有一个组件滑块，我需要将数据传递回父级，唯一的事实是子级是一个有点复杂的钩子，我一直无法找到类似的东西来帮助我在我的项目上实现，这就是我所拥有的：

孩子

function valuetext(value) {
  return `${value}`;
}

export default function RangeSlider() {
  const classes = useStyles();
  const [value, setValue] = React.useState([0, 100000]);

  const handleChange = (event, newValue) => {
    var val = setValue(newValue);
    //I guess here is when I'm suposed to send the info to the parent
  };

  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Kilometers
      </Typography>
      <Slider
        value={value}
        max={500000}
        min={0}
        step={1000}
        onChange={handleChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        getAriaValueText={valuetext}
      />
      <div id="seats-labes">
        <span>0km</span>
        <span>50.0000km</span>
      </div>
    </div>
  );
}

函数值文本（值）{
返回`${value}`；
}
导出默认函数RangeSloider（）{
const classes=useStyles（）；
const[value，setValue]=React.useState（[0，100000]）；
常量handleChange=（事件，newValue）=>{
var val=设置值（新值）；
//我想这是我被允许向家长发送信息的时候了
};
返回(
公里
0公里
50.000公里
);
}

家长：

 function WebFilter(props) { 

    
    return (
        <div className="filter-web-section">
         
        <Accordion className="filter-accordion">
            <Card className="card-section">
                <Card.Body>
                    <RangeSlider/>
                </Card.Body>
            </Card>
        </Accordion>
    </div>
    )
}


export default WebFilter;

函数WebFilter（props）{
返回(
)
}
导出默认WebFilter；

祖父：

class ResultModel extends Component {

    render() {
    
        return (
            <div>
                <h1>Texto de prueba + boton</h1> <button>+</button>
                <div className="SiteHeader">
                    <Header/>
                </div>
                <div className="cars-result-content">
                    <div className="cars-result-content__filters">
                        <WebFilter
                        />
                    </div>
                    <div className="car-result-content-list">
                        <div className="car-result-list__counter-cars">
                            <p>400 vehicles</p>
                        </div>
                        <div className="car-result-content-list__statBar">
                            <StatBar/>
                        </div>
                        <div className="cars-result-page-list__ListCars">
                            <ResultsView/>
                        </div>
                    </div>   
                </div>        
            </div>
        )
    }
}

类ResultModel扩展组件{
render（）{
返回(
德普拉巴文本+波顿文本+
400辆车

)
}
}

---

我一直在阅读关于在第一个组件（祖父）上声明钩子常量的文章，但是我还没有找到一种方法将数据传递给父亲。提前感谢您提供的任何提示或帮助。

问题的具体内容有点简短，但从我收集的信息来看，您只需要将函数从组件1传递到组件2再传递到组件3

实际上这很简单

在组件中，创建要传递的函数：

class ResultModel extends Component {
   const func1 = (data) => {console.log(data)}

  render() {
    ...

把它传给父亲：

...
<WebFilter func1={func1} />
...

然后，在child中这样称呼它：

export default function RangeSlider({func1}) {
  const classes = useStyles();
  const [value, setValue] = React.useState([0, 100000]);

  const handleChange = (event, newValue) => {
    var val = setValue(newValue);
    //I guess here is when I'm suposed to send the info to the parent
    func1("your data")
  };
...
...

---

这个问题在细节上有点简短，但从我收集的信息来看，您只需要将一个函数从组件1传递到组件2，再传递到组件3

实际上这很简单

在组件中，创建要传递的函数：

class ResultModel extends Component {
   const func1 = (data) => {console.log(data)}

  render() {
    ...

把它传给父亲：

...
<WebFilter func1={func1} />
...

然后，在child中这样称呼它：

export default function RangeSlider({func1}) {
  const classes = useStyles();
  const [value, setValue] = React.useState([0, 100000]);

  const handleChange = (event, newValue) => {
    var val = setValue(newValue);
    //I guess here is when I'm suposed to send the info to the parent
    func1("your data")
  };
...
...

---

如果您想了解一些东西，请阅读名为提升状态的react概念

阅读react中的提升状态

---

或者用谷歌搜索一下，读一两篇文章，如果仍然没有读到，然后发表评论，我会写完整的代码。

如果你想了解一些东西，请阅读名为“提升状态”的react概念

阅读react中的提升状态

---

或者只是在谷歌上看一两篇文章，如果仍然不明白，然后发表评论，我会写完整的代码。

什么是“双重回调”？只要让祖父母把道具传给孩子（父母），让父母把道具传给孩子。“双重回调”是什么？只要让祖父母把道具传给孩子（父母），并且父对象将道具传递给其子对象。感谢您的回答，我总是尝试此方法，我不断得到

TypeError:func1不是函数

错误。感谢您的回答，我总是尝试此方法，我不断得到

TypeError:func1不是函数

错误。