超级清楚的react 组件通信传值

最新推荐文章于 2022-10-24 17:35:27 发布

因-戴克斯

最新推荐文章于 2022-10-24 17:35:27 发布

阅读量411

点赞数 2

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/qq_33295794/article/details/83956456

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于组件的数据通信精简理解（从获取数据两种方式去理解）：

1.数据通信获取数据的两种方式：‘拿到’和‘传递’。

2.react 组件传值本质来讲就是两种：父传子和子传父。

讲解：

1.1‘拿到’，指的是通过对象拿到数据。比如react 中父组件传值给子组件（本质上我们理解是从子组件中拿到父级传来的值！）。那么在子组件中如何拿到父组件的值，这里我们通过的是this.props属性。例如下面的代码：

1.father.jsx 解释：在child 标签中设置‘childData’属性，并且赋值（代码中我把父级的state中的值传给子组件实际中随便你给什么值）

import Child from ‘./child’

class Father extends Component {
  constructor(){
     super()
     this.state = {
       username:'test',
       content:''
     }
  }
  render(){
     return(
       <div className="commentBox">
          <Child childData = "this.state.username"/>
       </div>
     )
  }
}
export default Father

child.jsx 解释：直接通过this.props.XX 获取父级给子级值。XX为父级写入子组件标签的属性名称。

import React, { Component } from 'react'
class Child extends Component {
  render() {
    return(
      <div>
        {this.props.childData}
      </div>
    )
  }
}
export default Child

1.2 ‘传递’。传递是一种动作！需要事件出发！这两点要记住！知识点有没有！

一般我们理解的子组件传给父组件数据，本身理解中是“传递的意思”，意思是通过某中事件触发，例如：点击事件！

情景，子组件是输入框, 数据输入完之后，我们需要将数据传递给父组件件，并且在父组件中调用后台接口。分析：事件的本身是从子组件中’传递‘给父组件而不是父组件直接‘获取’子组件‘的值。

看代码：（子组件）

import React, { Component } from 'react'
class CommentInput extends Component {
  constructor (){
    super()
    this.state = {
      username:'1121',
      content:'31131'
    }
  }
  handleUsernameChange(e){
    this.setState({
      username: e.target.value
    })
    // 注意：setState 之后 并未生效！ 在render中生效!
    // console.log(this.state.username)
  }
  handleContentChange(e){
    this.setState({
      content: e.target.value
    })
    // console.log(this.state.content)
  }
  
  sendMessage(e){
    // 拿到值
    let test = this.state
    console.log('保存的值', test)
    // 重置
    this.setState({
      content: '',
    })
     // 判断是否传输了onsubmit属性！
    if(this.props.onSubmit){
      const  { username, content } = this.state
      this.props.onSubmit({username, content})
    }
  render() {
    // this.a(this.b)
    return(
    <div className='comment-input'>
        <div className='comment-field'>
          <span className='comment-field-name'>用户名：</span>
          <div className='comment-field-input'>
            <input value = {this.state.username}  onChange={this.handleUsernameChange.bind(this)}/>
          </div>
        </div>
        <div className='comment-field'>
          <span className='comment-field-name'>评论内容：</span>
          <div className='comment-field-input'>
            <textarea value ={this.state.content}  onChange={this.handleContentChange.bind(this)}/>
          </div>
        </div>
        <div className='comment-field-button'>
          {/* 点击发布按钮！向父组件传值 */}
          <button onClick = {this.sendMessage.bind(this)}>
            发布
          </button>
        </div>
      </div>
    )
  }
}
export default CommentInput

注意：代码中最后的点击事件

sendMessage(e){
// 拿到值
let test = this.state
console.log('保存的值', test)
// 重置
this.setState({
content: '',
})
// 判断是否传输了onsubmit属性！
if(this.props.onSubmit){
const { username, content } = this.state
this.props.onSubmit({username, content}) 这个就是’传递‘的本质，调用父组件中的方法，并且把子组件中的数据当作参数！

还有知识点！！！this.props.onSubmit({username, content}) 叫做 this.props.onSubmit({username, content})的回调函数！！！
}

那么放上父级组件代码，供参考

import React, { Component } from 'react';
import CommentInput from './CommentIput';
import CommentList from './CommentList';
import '../css/comment.less';
class CommentApp extends Component {
  onSubmit(d){
    console.log(d)
  }
  render(){
     return(
       <div className="commentBox">
          <CommentInput />
          <CommentList/>
       </div>
     )
  }
}
export default CommentApp

1.3 还有知识点!!！我们通过'拿到'这种方式直接在父级拿数据！

需要理解的是，组件其实是一种封装的对象。那么是不是可以在父组件中，把子组件看成一个对象，对象中有state prpos 等各种属性。答案是坑定的！！！那么这样子组件就不用传递！直接从父组件拿子组件中的值！通过ref这个属性。

上代码：

import React, { Component } from 'react';
import CommentInput from './CommentIput';
import CommentList from './CommentList';
import '../css/comment.less';
class CommentApp extends Component {
  // constructor (){
  //   super()
  //   this.state = {
  //     username:'',
  //     content:''
  //   }
  // }
  refCb(instance){
    console.log(instance)
  }
  onSubmit(d){
    console.log(d)
  }
  componentDidMount(){
    console.log('11', this.refs)
  }
  render(){
     return(
       <div className="commentBox">
          <CommentInput ref="refCb"/>
          <CommentList ref="xcsx"/>
       </div>
     )
  }
}
export default CommentApp