react,父组件如何获取子组件的值

2023-11-08

class Son extends React.Component {
  render() {
    return <input onChange={this.props.onChange}/>;
  }
}

class Father extends React.Component {
  constructor() {
    super();
    this.state = {
      son: ""
    }
  }
  changeHandler(e) {
    this.setState({
      son: e.target.value
    });
  }
  render() {
    return <div>
      <Son onChange={this.changeHandler.bind(this)}/>
      <p>这里显示 Son 组件的内容:{this.state.son}</p>
    </div>;
  }
}

ReactDOM.render(<Father/>, mountNode);

子组件直接改变父组件传入的props值是不被允许,但是可以通过父组件传入一个改变状态的函数,然后在子组件中进行函数的调用,即可实现。

实例中,

1.在父组件中定义了一个状态son,用于接收子组件中状态的变化。

2.在父组件中定义了一个函数changeHandler,绑定在子组件的onChange属性上,因此在子组件中onChange属性可以通过this.props.onChange去调用父组件中这个改变状态的函数。从而,实现父组件可以获取到子组件的值的变化。

另一个实例,转载自博主:治愈系的江予夺

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react,父组件如何获取子组件的值 的相关文章

  • 是否可以用 json 进行表达式/计算?

    我使用出色的 json server 作为应用程序的后端 它对于访问自定义端点以检索一些数据非常有用 但是如果它允许我进行计算 表达式以便我也可以模仿后端行为 那将会非常有用 以这个数据结构为例 products name football
  • IdentityServer4 无法在生产环境中运行

    我正在使用 IdentityServer4 和 ASP NET Core 3 0 的 React 启动项目 预览版 4 一直运行良好 直到我构建解决方案并尝试使用 dotnet 命令从 cmd 提示符运行它 每次启动应用程序时 它都会告诉我
  • 如何使用ReactJS上传图片并保存到本地存储?

    这是我的代码如下
  • 在 NextJS 上运行开发服务器(在网络上)

    在使用 ReactJS 时 当我们使用命令 npm start 时 它会在 localhost 3000 以及网络 192 168 1 2 3000 上启动开发服务器 这非常简单 我可以通过进入该地址在所有设备上测试我的应用程序 最近我开始
  • 在 React 中禁用 Material-UI 生产 css 类名

    我正在使用 Material UI for React 并且我想在以下情况下禁用它处理类名的方式 NODE ENV production 例如 开发 MuiAppBar root 12 制作 jss12 我希望生产类名称与开发中使用的类相同
  • React Query useInfiniteQuery 使单个项目无效

    使用 useInfiniteQuery 时如何使单个项目无效 这是一个演示我想要实现的目标的示例 假设我有一个成员列表 每个成员都有一个关注按钮 当我按下 关注 按钮时 会单独调用服务器来标记给定用户正在关注另一个用户 此后 我必须使整个无
  • JSX 中的混合运算符

    我想在 JSX 中使用混合运算符 例如 datas datas map function data i return
  • React useEffect hook 和 Async/await 自己的获取数据函数?

    我尝试创建一个从服务器获取数据的函数 并且它有效 但我不确定这是否正确 我创建了一个函数组件来获取数据 使用useState 使用效果 and 异步 等待 import React useState useEffect from react
  • 无法读取未定义错误的属性“匹配”

    我试图在 React JS 前端显示一些文本来代替个人资料图像 当它不可用时 基本上 我将当前客户名称传递给一个函数 该函数提取名称中所有单词的第一个字符 我能够仅显示名称 但是当我执行函数调用时 出现 无法读取未定义的属性 匹配 错误 并
  • 如何使用 Typescript 设置 Material-UI for React?

    我在将 Material UI 添加到我的 React 项目中时遇到了一些问题 该项目是用 Typescript 编程的 根据教程 我首先添加react tab event plugin import injectTapEventPlugi
  • ReactJS setState 仅在嵌套在 setState 中时才有效

    问题 当我使用 this setState 并在回调中输出状态时 它根本不会改变 但是当我将 setstate 嵌套在 setstate 中时 它将正常工作 例子 这不行 this setState data newData 这确实有效 t
  • 从外部material-ui组件访问主题

    我有一个使用标准深色主题的主题提供商 我希望能够从我自己的自定义组件访问该主题的详细信息 但我不知道如何做到这一点 在下面的例子中 this props theme未定义 ReactDOM render
  • 如何使用 JSX 和 Lodash 重复一个元素 n 次

    我在我的应用程序中使用 React JSX 和 Lodash 来实现我想要的 我需要根据条件重复某个元素一定次数 我该怎么做呢 这是元素 span span 我这样分配它 let card if data hand 8 or more ca
  • 为什么在 ES6 中不应该使用 import all

    所以我最近开始学习 React 并注意到所有文档都有类似的导入 import Apples Bananas Oranges from fruits 但是在研究 React 时我发现这种语法也同样有效 import as Fruits fro
  • 开玩笑错误意外的令牌...(ES6)

    每当我在命令行中运行 jest 时 都会收到以下错误 Test suite failed to run Users
  • 如何在 getStaticPaths 内添加 params 值数组

    我有一个页面 其结构如下 read slug number 我想要得到slug每个对应的值number in the getStaticPaths这是代码 export async function getStaticPaths const
  • 在 React.js 中有条件地设置 html 属性

    我在为 React 中的单选按钮组件设置默认选项时遇到了令人惊讶的困难 这是我的RadioToggle成分 jsx React DOM var RadioToggle React createClass render function va
  • 避免对象突变

    我正在使用 React 和 ES6 所以我遇到了以下情况 我有一个带有对象数组的状态假设a id 1 value 1 id 2 value 2 处于以下状态Object A 然后我将列表传递给Object B通过道具 Object B 在构
  • 如何在React中处理多个路由器

    假设我们有一个网络应用程序 它通常有很多视图 例如索引页面 管理面板 帮助页面 联系人等 我在主index js 中使用react router dom 来处理它们 它工作得很好 但是现在我在开发管理面板时遇到了问题 它是 index js
  • 发生错误。", ExceptionMessage: "提供的 'HttpContent' 实例无效

    尝试将文件添加到 http 休息调用时出现此错误 responseJson 消息 发生错误 ExceptionMessage 提供了无效的 HttpContent 实例 它确实 正在使用 多部分 参数名称 内容 异常类型 System Ar

随机推荐