react子组件往父组件传值

在React中，子组件向父组件传递数据可以通过以下步骤实现：

1. 在父组件中定义一个函数，该函数将在子组件中被调用，并将数据作为参数传递给该函数。
2. 将该函数作为属性传递给子组件。
3. 在子组件中，当需要向父组件传递数据时，调用该函数并传递数据作为参数。

以下是一个简单的示例代码：

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [dataFromChild, setDataFromChild] = useState('');

  const handleChildData = (data) => {
    setDataFromChild(data);
  };

  return (
    <div>
      <ChildComponent onChildData={handleChildData} />
      {dataFromChild && <p>Data from child: {dataFromChild}</p>}
    </div>
  );
}

export default ParentComponent;

// 子组件
import React, { useState } from 'react';

function ChildComponent(props) {
  const [data, setData] = useState('');

  const sendDataToParent = () => {
    props.onChildData(data);
  };

  return (
    <div>
      <input value={data} onChange={(e) => setData(e.target.value)} />
      <button onClick={sendDataToParent}>Send Data to Parent</button>
    </div>
  );
}

export default ChildComponent;

在上面的示例中，父组件通过`onChildData`属性将`handleChildData`函数传递给子组件，当子组件需要向父组件传递数据时，调用该函数并传递数据作为参数。父组件通过`dataFromChild`状态来接收子组件传递的数据，并在页面上显示。