react同级组件之间传值

前端之家收集整理的这篇文章主要介绍了react同级组件之间传值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面我们以一个评论的demo来讲述如何实现这个效果:

这里有一个比较重要的知识点就是关于props传值, 关于props这里我就不多进行阐述了

首先我们先规划好整个代码结构,commentInput存放的是我们输入的用户名信息以及评论内容

  1. class CommentApp extends Component {
  2. render() {
  3. return (
  4. <div>
  5. <CommentInput /> //输入内容
  6. <CommentList /> // 展示列表
  7. </div>
  8. )
  9. }
  10. }

正如以上我们所看到的, CommentInput,CommentList是同级的两个组件, 那么我们如何才能将CommentInput内输入的值传递到CommentList中呢,从上述结构我们可以看到,CommentApp是充当了一个父组件的角色,所以它是可以充当桥接两个组件的桥梁的,即当我们点击发布按钮的时候,我们就将CommentInput中输入的评论内容传递给父组件,然后父组件再通过props将数据传递给CommentList.

接下来就来讲述下如何将CommentInput的值传递给CommentList

  1. 在父组件中定义一个函数,将这个函数通过props传递给CommentInput
  1. class CommentApp extends Component {
  2. constructor() {
  3. super()
  4. this.state = {
  5. info: []
  6. }
  7. }
  8. handleSubmit(con){
  9. console.log(con); //此处的con即表示接收到的评论内容
  10. }
  11. render() {
  12. return (
  13. <div>
  14. <CommentInput onSubmit={ this.handleSubmit.bind(this) }/> //输入内容
  15. <CommentList /> // 展示列表
  16. </div>
  17. )
  18. }
  19. }
  1. 如上述代码, 这时候, 我们只要在CommentInput中,获取输入框的内容, 并将值传递给onSubmit函数即可。
  1. class CommentInput extends Component {
  2. handleClick() {
  3. let inpText = this.refs.inp.value; //此处可以用state
  4. let txtText = this.refs.txt.value; //此处可以用state
  5. if (this.props.onSubmit) {
  6. this.props.onSubmit({inpText,txtText});
  7. }
  8. }
  9. render() {
  10. return (
  11. <div>
  12. <input ref="inp" style={{
  13. display: 'block',width: 300
  14. }}/>
  15. <textarea ref="txt" style={{
  16. display: 'block',width: 300,height: 100,marginTop: 20
  17. }}></textarea>
  18. <button onClick={this.handleClick.bind(this)}>发布</button>
  19. </div>
  20. )
  21. }
  22. }
  1. 接下来就是处理列表数据的展示了,父组件在拿到了评论内容后就可以将数据传递给CommentList了。
  1. //此时,可以将CommentApp中的render修改
  2.  
  3. render() {
  4. return (
  5. <div>
  6. <CommentInput onSubmit={ this.handleSubmit.bind(this) }/> //输入内容
  7. <CommentList listContent={ this.state.info }/> // 展示列表
  8. </div>
  9. )
  10. }

好了, 这样我们就实现了简单的发布评论功能了, 本次主要是记录如何借助父级组件从而实现同级组件之间传值。

完整代码如下所示:

  1. import React,{Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4.  
  5. class CommentApp extends Component {
  6. constructor() {
  7. super()
  8. this.state = {
  9. info: []
  10. }
  11. }
  12. handleSubmit(con) {
  13. this.state.info.push(con);
  14. this.setState({info: this.state.info})
  15. }
  16. render() {
  17. return (
  18. <div>
  19. <CommentInput onSubmit={this.handleSubmit.bind(this)}/>
  20. <CommentList listContent={this.state.info}/>
  21. </div>
  22. )
  23. }
  24. }
  25.  
  26. class CommentInput extends Component {
  27. handleClick() {
  28. let inpText = this.refs.inp.value;
  29. let txtText = this.refs.txt.value;
  30. if (this.props.onSubmit) {
  31. this.props.onSubmit({inpText,marginTop: 20
  32. }}></textarea>
  33. <button onClick={this.handleClick.bind(this)}>发布</button>
  34. </div>
  35. )
  36. }
  37. }
  38.  
  39. class CommentList extends Component {
  40. static defaultProps = {
  41. listContent: []
  42. }
  43. render() {
  44. return (
  45. <ul>
  46. {/*<li>{ this.props.listContent.length }</li>*/}
  47. {
  48. this.props.listContent.map((item,index) => {
  49. return (
  50. <li key={index} style={{
  51. listStyle: 'none'
  52. }}>
  53. <span >{item.inpText}--</span>
  54. <span>{item.txtText}</span>
  55. </li>
  56. )
  57. })
  58. }
  59. </ul>
  60. )
  61. }
  62. }
  63.  
  64. ReactDOM.render(
  65. <CommentApp/>,document.getElementById('root')
  66. )

猜你在找的React相关文章