React工作31:react父传子

简介: React工作31:react父传子
import React from 'react'
import Son from './son'
class Father extends React.Component {
  constructor(props) {
    super(props)
  }
  state = {
    info: '父组件',
  }
  handleChange = (e) => {
    this.setState({
      info: e.target.value,
    })
  }
  render() {
    return (
      <div>
        <input type='text' value={this.state.info} onChange={this.handleChange} />
        <Son info={this.state.info} />
      </div>
    )
  }
}
export default Father
// 子组件
import React from 'react'
interface IProps {
  info?: string
}
class Son extends React.Component<IProps> {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
        <p>{this.props.info}</p>
      </div>
    )
  }
}
export default Son
相关文章
|
6月前
|
前端开发
React数据通信父传子和子传父的使用
React数据通信父传子和子传父的使用
|
6月前
|
JavaScript 前端开发 小程序
Vue、React和小程序中的组件通信:父传子和子传父的应用
Vue、React和小程序中的组件通信:父传子和子传父的应用
81 0
|
前端开发 JavaScript 小程序
Vue、React和小程序中的组件通信:父传子和子传父
Vue、React和小程序中的组件通信:父传子和子传父
83 0
|
前端开发
React工作18:工具学会全局搜索
React工作18:工具学会全局搜索
124 0
React工作18:工具学会全局搜索
|
前端开发
React工作16:ant design form两种验证
React工作16:ant design form两种验证
104 0
React工作16:ant design form两种验证
|
前端开发
React工作20:token的获取
React工作20:token的获取
108 0
React工作20:token的获取
|
前端开发
React工作73:子组件this
React工作73:子组件this
117 0
React工作73:子组件this
|
前端开发
react中父子组件传值详解,如何进行传值校验(父传子,子组件改变父组件的值)
本篇主要给大家介绍react中父子组件传值详解,如何进行传值校验
640 0
|
前端开发
React工作63:ant design 锚点
React工作63:ant design 锚点
449 0
|
前端开发 JavaScript
React工作42:react中的jsx表达对象
React工作42:react中的jsx表达对象
103 0