Hooks 回调 - 反应

Posted 2023-02-16

【中文标题】Hooks 回调 - 反应

【英文标题】：Hooks Callback- react

【发布时间】：2021-02-10 06:11:07

【问题描述】：

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

孩子

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>
  );

父母：

 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;

爷爷：

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>
        )
    

我一直在阅读有关在第一个组件（祖父）处声明挂钩常量的信息，但我无法找到一种方法通过父组件传递数据。提前感谢您的任何提示或帮助。

【问题讨论】：

什么是“双重回调”？

只需让祖父母将道具传递给其孩子（父母），而父母将道具传递给其孩子。

【参考方案1】：

这个问题在细节上有点短，但据我所知，您只需将一个函数从组件 1 通过组件 2 传递到组件 3。

其实很简单。

在你的爷爷组件中，创建一个你想要传递的函数：

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

  render() 
    ...

传给父亲：

...
<WebFilter func1=func1 />
...

在父组件中，获取func1并将其传递给子组件：

function WebFilter(props)  
    const func1 = props;
    
    return (
        <div className="filter-web-section">
         
        <Accordion className="filter-accordion">
            <Card className="card-section">
                <Card.Body>
                    <RangeSlider func1=func1 />
                </Card.Body>
            </Card>
        </Accordion>
    </div>
    )

然后在 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")
  ;
...
...

【讨论】：

感谢您的回答，我总是尝试这种方法，但一直收到TypeError: func1 is not a function 错误。

【参考方案2】：

如果你想了解一些有关 React 概念的知识，请阅读 lifting the state up。

阅读有关在 react documentation 中提升状态的信息

或者只是谷歌它阅读一两篇文章如果仍然没有得到它然后发表评论我会写完整的代码。