区块链技术博客
www.b2bchain.cn

react组件化实现简易留言板

这篇文章主要介绍了react组件化实现简易留言板的讲解,通过具体代码实例进行24107 讲解,并且分析了react组件化实现简易留言板的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=24107

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

react组件化实现简易留言板

    • 效果
    • 实现
      • 1.input组件
      • 2.button组件
      • 3.list组件
      • 4.App.jsx
      • 5.index.js

效果

react组件化实现简易留言板
react组件化实现简易留言板

实现

可以拆分为三个组件,input组件,button组件,list组件

1.input组件

input组件实现昵称的输入框和留言内容的输入框,通过判断父组件上是否传了row属性来判断是展示位单行输入框还是文本域输入框。

这两种输入框上面都有一个OnInput事件,用来获取当前输入框的值。

import React,{Fragment} from 'react'  export default function Input(props) {      let inputValue = function(e){     	//触发父组件上面的inputValue事件,并把e.target.value(当前输入框的值)传给父组件。         props.inputValue(e.target.value)     }          let input = null;     if(!props.row){         input = <input onInput={inputValue}></input>     }else{         input = <textarea rows="5" cols="30" onInput={inputValue}></textarea>     }     return (         <Fragment>             {input }         </Fragment>     ) }  

2.button组件

button组件用来实现提交按钮。

import React from 'react'  export default function Button(props) {      let handelSubmit = function(){     	//触发父组件上面的onSubmit事件,         props.onSubmit()     }     return (         <div>             <button onClick={handelSubmit}>提交</button>         </div>     ) }  

3.list组件

list组件用来实现留言内容的遍历展示。
首先判断当前要遍历的数组是否有值,然后有值的话,就遍历当前事件数组。

import React from 'react'  export default function List(props) {          let comment = null;     if(!props.data || props.data.length === 0){         comment = <p style={{textAlign:'center'}}>还没有留言!</p>     }else{         comment = props.data.map((item,index) => {             return(                 <div className="comment-item" key={index}>                     <div className="name">                         昵称:<span>{item.name}</span>&nbsp;&nbsp;                         时间:<span>{item.time}</span>                     </div>                     <div className="content">                         内容:{item.content}                     </div>                     <div className="star">                         <span onClick={() => {                             props.addStar(item,index)                         }}>({item.star})</span>                     </div>                 </div>             )         })     }      return (         <div>             {comment}         </div>     )      }  

4.App.jsx

App.jsx是父组件。

import React, { Component } from 'react'; import Button from './Button'; import Input from './Input'; import List from './List'; import './App.css'  class App extends Component {     constructor(){         super();         this.state = {             name : '',             content : '',             lists : []         }         this.userName = this.userName.bind(this);         this.userContent = this.userContent.bind(this);         this.submit = this.submit.bind(this);         this.onStar = this.onStar.bind(this)     }       render() {         let {lists} = this.state;         return (             <div>                 {/* 留言列表 */}                 <List data={lists} addStar={this.onStar}></List>                 {/* 留言操作区 */}                 <div className="comment">                     <div className="name">                         <span>昵称:</span>                         <Input inputValue={this.userName}></Input>                     </div>                     <div className="content">                         <span>内容:</span>                         <Input row  inputValue={this.userContent}></Input>                     </div>                     <Button onSubmit={this.submit}></Button>                 </div>             </div>         );     }      //输入昵称     //更新视图,实现数据的双向绑定,参数为子组件上的默认参数     userName(val){         this.setState({             name : val         })     }      //输入姓名     //更新视图,实现数据的双向绑定,参数为子组件上的默认参数     userContent(val){         this.setState({             content : val         })     }      //提交事件     //点击提交按钮的时候,往要遍历的数组中push一个对象,把name,time,content,star都传进去。     submit(){         let lists = this.state.lists;         lists.push({             name : this.state.name,    //name为当前state对象里面的name,是输入昵称事件绑定的数据             time : this.getTime(),      //time是调用了一个自定义函数             content : this.state.content,     //content为当前state对象里面的content,是输入留言内容事件绑定的数据             star : 0    //star默认值为0         }) 		//更新视图  一定要记得,不是吧值push进list就没事了,一定呀更新视图,才能调用render()函数来更新视图         this.setState({             lists         })         console.log(this.state.lists)     }      //点赞事件     //参数为子组件上的默认事件,item是当前要点赞的对象,index是当前要点赞对象的下标。首先获取到当前要点赞对象的副本,然后让它的点赞数加1,然后再把当前对象删除,并把新的对象传进去。     onStar(item,index){         let obj = item;         obj.star ++;          let lists = this.state.lists;         lists.splice(index,1,obj); 		//更新视图         this.setState({             lists         })     }      //获取时间     getTime(){         let d = new Date();         return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}`     } }  export default App; 

5.index.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'  ReactDOM.render(     <App />,   document.getElementById('root') );   

需要注意的就是,state里面有name,content,是输入事件双向绑定的数据,以及list数组对象,是提交按钮push进去的对象,里面有留言展示区域要展示的所有内容。

本文转自互联网,侵权联系删除react组件化实现简易留言板

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » react组件化实现简易留言板
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们