Question

我正在尝试通过父按钮中发生的onClick事件将子数据传递给父。

我在下面定义了一个基本的模拟程序，以解释我要实现的目标。

const Parent = () => {

    const childData = (data) => {
        console.log(data);
    }

    const receiveData = () => {
        childData();
    }

    return (
        <>
            <button onClick={receiveData}>Receive Child Data</button>
            <Child onParentClick={childData} />
        </>
    )
}

const Child = ({onParentClick}) => {
    // Trigger onParentClick here to pass some data to parent
    return (
        // something
    )
}

我该如何实现？

Answer 1

class Parent extends Component {
  passDataToParent = data => {
    console.log(data);
  }
  render() {
    return (
      <Child passDataToParent={this.passDataToParent} />
    );
  }
}

const Child = props => {
  buttonClick = () => {
    const data = {
      a: 1
    };
    props.passDataToParent(data);
  };
  return (
    <Button onClick={buttonClick} />
  )
}

Answer 2

您可以使用回调执行类似的操作（此示例使用钩子）。

编辑：对我来说，这确实感觉像是一种“反模式” ...据我了解，React是一种从上到下的数据流方式..（例如，为什么如此棘手完成，使用“高阶组件”等。）此外，这不一定将数据“传递”给父对象。说“传递对子功能的引用”会更合适到父级'..父级仅调用子级函数。意思是不传递“数据”，而是传递函数本身。如果我错了，请更正我...我对React还是很陌生。最后，我不了解此类用例-在哪种情况下需要使用这种“范例”？

[CodePen Mirror]

// Parent
const Parent = () => {
  let child;
  
  function getChildData(callbacks){
    child = callbacks;
  }

    return (
      <div>
        <button onClick={() => child.getData()}>Retreive Child Data</button>
        <Child onRetreiveChildData={callbacks => getChildData(callbacks)} />
      </div>
    );
}

// Child
const Child = ({ onRetreiveChildData }) => {
  const [state, setState] = React.useState({
    data: "Default Child Data"
  });

  if (onRetreiveChildData) {
    onRetreiveChildData({
      getData: () => getData("Data from Child: " + Math.random())
    });
  }
  
  function getData(data){
    setState({ data: data });
  };

  return (
    <pre>{state.data}</pre>
  )
};


ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id='root' style='width: 100%; height: 100%'>
</div>

在React中在父项中触发的onClick事件上将子项数据传递给父项

2 个答案: