9 Reactjs 状态提升

「爱情、让人受尽委屈。」 2023-02-27 08:10 36阅读 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 条评论，36人围观）

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

相关阅读

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

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

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

相关 reactjs全局状态管理：redux介绍

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

ゝ一世哀愁。/ 2023年10月01日 16:59/ 0 赞/ 56 阅读

相关 reactjs 全局状态管理：redux的组成

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

Bertha 。/ 2023年10月01日 16:59/ 0 赞/ 58 阅读

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

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

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

相关 9 Reactjs 代码拆分

打包(Bundling) 大多数的 React 应用程序使用[Webpack][]或 [Browserify][] 等工具来 “打包” 文件。打包(Bundling) 是

心已赠人/ 2023年02月27日 12:06/ 0 赞/ 22 阅读

相关 9 Reactjs 状态提升

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

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

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

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

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

相关 React中的状态提升

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

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

相关编程能力提升_9

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

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

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

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

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