react父组件怎么获取子组件的值-开发者知识库平台

react父组件怎么获取子组件的值

React

1681

2024/1/20 10:58:11

栏目: 编程语言

在React中，父组件可以通过props将值传递给子组件，并通过回调函数的方式从子组件中获取值。

以下是一个示例：

父组件：

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

function ParentComponent() {
  const [childValue, setChildValue] = useState('');

  const handleChildValueChange = (value) => {
    setChildValue(value);
  };

  return (
    <div>
      <ChildComponent onValueChange={handleChildValueChange} />
      <p>子组件的值：{childValue}</p>
    </div>
  );
}

export default ParentComponent;

子组件：

import React, { useState } from 'react';

function ChildComponent({ onValueChange }) {
  const [value, setValue] = useState('');

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

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

export default ChildComponent;

在父组件中，通过使用useState钩子来创建一个状态变量childValue，用来存储子组件的值。

然后，定义一个回调函数handleChildValueChange，它会在子组件的值发生变化时被调用，并将新的值更新到childValue变量中。

在子组件中，通过使用useState钩子来创建一个状态变量value，用来存储输入框的值。

然后，定义一个handleChange函数，它会在输入框的值发生变化时被调用，并将新的值更新到value变量中。

同时，调用父组件传递过来的onValueChange回调函数，并将新的值作为参数传递给父组件。

最后，在父组件中，通过传递handleChildValueChange函数给子组件的onValueChange属性，实现了父组件获取子组件的值的功能。

当子组件的输入框的值发生变化时，父组件会自动更新并显示最新的值。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

react父组件怎么获取子组件的值

最新知识库

相关标签