时间戳

首页 > 解决方案 > Hooks 回调 - 反应

javascript - Hooks 回调 - 反应

问题描述

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

孩子

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

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

标签： javascriptreactjsreact-hooks

解决方案

这个问题在细节上有点短，但据我所知，您只需将一个函数从组件 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>
    )
}

然后在孩子这样称呼它：

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")
  };
...
...

推荐阅读