从子组件调用父组件 function

Question

React 相当新。 作为爱好项目网站的一部分，我有一个彩票轮盘：使用 npm 下载了轮盘 object：

npm install lottery-wheel

import Wheel from 'lotter-wheel'

class Lottery extends Component {
   constructor() {
     bla bla 
   }
  
  componentDidMount() {
     new Wheel( {
        el: document.querySelector("#wheel"),
            onSuccess(data) {
              alert(`Congratulations, you picked up ${data.text}`)
              /* I want to pass the data here to Parent */ 
            },
            onButtonHover(anime, button) {
                anime({
                  targets: button,
                  scale: 1.3,
                  perspective: 80,
                  duration: 400
                });
            },
     });
  }

  render() {
  
    return (
      <div id="wheel"></div>
    )
  }
}

所以，在回调函数“onSuccess”中，我想将“数据”从 Wheel 子组件传递给“Lottery”父组件。

我怎样才能做到这一点？ 我知道道具是如何工作的，但在这种情况下不知道。在这种情况下，我可以使用钩子吗？ 我想避免下载并进入“轮子”定义，因为它不是由我创建的。

Answer 1

定义一个 function 并在Wheel中设置为onSuccess回调。

class Lottery extends Component {
  successHandler = data => {
    alert(`Congratulations, you picked up ${data.text}`);
  };

  componentDidMount() {
    new Wheel({
      el: document.querySelector("#wheel"),
      data: [{
        text: 'apple',
        chance: 20
      }, {
        text: 'banana'
      }, {
        text: 'orange'
      }, {
        text: 'peach'
      }],
      onSuccess: this.successHandler,
      onButtonHover(anime, button) {
        anime({
          targets: button,
          scale: 1.3,
          perspective: 80,
          duration: 400
        });
      }
    });
  }

  render() {
    return <div id="wheel"></div>;
  }
}