react子组件怎么向父组件传值

在React中，子组件向父组件传值可以通过两种方式实现：

1. 通过回调函数： 父组件可以通过props将一个回调函数传递给子组件，子组件可以通过调用这个回调函数并传递参数来将值传递回父组件。

父组件示例代码：

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

function ParentComponent() {
  const [value, setValue] = useState('');

  const handleChildValue = https://www.yisu.com/ask/(childValue) => {
    setValue(childValue);
  };

  return (
    

      
      
Value from child component: {value}
    
  );
}

export default ParentComponent;

子组件示例代码：

import React, { useState } from 'react';

function ChildComponent({ onValueChange }) {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
    onValueChange(event.target.value);
  };

  return (
    

      
    
  );
}

export default ChildComponent;

在上面的示例中，子组件ChildComponent接收一个onValueChange的props，它是一个回调函数。当子组件的输入框的值发生变化时，会调用handleChange函数，将输入的值传递给onValueChange回调函数，从而将值传递回父组件。

2. 使用Context： 父组件可以通过创建一个Context，并将需要传递的值放入Context的Provider中，子组件可以通过Context的Consumer来获取这个值。

父组件示例代码：

import React, { useState } from 'react';
import { MyContext } from './MyContext';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [value, setValue] = useState('');

  return (
    

      
        
      
      
Value from child component: {value}
    
  );
}

export default ParentComponent;

子组件示例代码：

import React, { useContext, useState } from 'react';
import { MyContext } from './MyContext';

function ChildComponent() {
  const value = https://www.yisu.com/ask/useContext(MyContext);'');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    

      
      
Value from parent component: {value}
    
  );
}

export default ChildComponent;

在上面的示例中，父组件ParentComponent创建了一个MyContext，并将value放入MyContext.Provider的value属性中。子组件ChildComponent通过useContext来获取MyContext的值，并将其显示在页面上。子组件也可以通过input的onChange事件来更新inputValue的状态值，但这个值只在子组件中存在，并不会传递给父组件。