9 Reactjs 状态提升

「爱情、让人受尽委屈。」 2023-02-27 08:10 7阅读 0赞

子组件的状态发生了改变，如何向父组件汇报？示例

// 子组件

class TemperatureInput extends React.Component \{

constructor(props) \{

super(props);

this.handleChange = this.handleChange.bind(this);

\}

handleChange(e) \{

// 调用父组件的函数

this.props.onTemperatureChange(e.target.value);

\}

render() \{

const temperature = this.props.temperature;

return (

<fieldset>

<input value=\{temperature\}

onChange=\{this.handleChange\} />

</fieldset>

);

\}

\}

// 父组件

class Calculator extends React.Component \{

constructor(props) \{

super(props);

this.handleCelsiusChange = this.handleCelsiusChange.bind(this);

this.state = \{temperature: ''\};

\}

handleCelsiusChange(temperature) \{

this.setState(\{temperature: temperature\});

\}

render() \{

return (

<div>

<TemperatureInput

temperature=\{this.state.temperature\}

onTemperatureChange=\{this.handleCelsiusChange\} />

</div>

);

\}

\}

ReactDOM.render(

<Calculator />,

document.getElementById('root')

);

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 reactjs状态管理工具（数据仓库）mobx和redux的对比

![在这里插入图片描述][a7a0ea745bc24eb3807fe29d4aa0cb4c.png] [a7a0ea745bc24eb3807fe29d4aa0cb4c.p

以你之姓@/ 2023年10月02日 20:18/ 0 赞/ 40 阅读

相关 reactjs redux集中式状态管理最简入门案例

reactjs redux集中式状态管理最简入门案例 ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q

今天药忘吃喽~/ 2023年10月01日 17:10/ 0 赞/ 27 阅读

相关 reactjs生命周期：forceUpdate流程(不更新状态)

reactjs生命周期：forceUpdate流程(不更新状态) ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_

傷城~/ 2023年10月01日 02:58/ 0 赞/ 52 阅读

相关 reactJs 基础

react不是一个完整的mvc,mvvm框架。 react跟web components 不冲突背景原理：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每

不念不忘少年蓝@/ 2023年08月17日 16:20/ 0 赞/ 179 阅读

相关 9 Reactjs 状态提升

子组件的状态发生了改变，如何向父组件汇报？示例 // 子组件 class TemperatureInput extends React.Component \{

「爱情、让人受尽委屈。」/ 2023年02月27日 08:10/ 0 赞/ 8 阅读

相关 4 Reactjs 组件状态和生命周期

把函数式组件转化为类组件 class Clock extends React.Component \{ render() \{ return (

╰+哭是因爲堅強的太久メ/ 2023年02月27日 08:08/ 0 赞/ 60 阅读

相关 9.线程的状态

通过以下代码来获取到线程状态 public static void main(String[] args) { for (T

旧城等待，/ 2022年11月03日 10:56/ 0 赞/ 40 阅读

相关 React中的状态提升

// 状态提升 // 当有两输入框时，一个表示摄氏度，一个表示华氏度； // 首先封装输入框组件 class TemperatureI

桃扇骨/ 2022年11月03日 10:47/ 0 赞/ 157 阅读

相关编程能力提升_9

目录 1.请判断一个链表是否为回文链表。 2.给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的一个字母异位词。 3.给定一个非负整数 num，反复将各

比眉伴天荒/ 2022年02月28日 12:05/ 0 赞/ 138 阅读

相关 react系列（15）状态提升

使用 react 经常会遇到几个组件需要共用一个状态的情况，这种情况可以使用状态提升。举个现实的例子，如汇率兑换，在人民币输入栏中输入金额，其他国家货币相应的兑换金额就换算出来

水深无声/ 2021年09月16日 22:56/ 0 赞/ 354 阅读