知识点:
类组件的创建、渲染
条件渲染
列表渲染:使用map
解构赋值
input、textarea受控组件
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component{
state={
txt:'',
content:'',
commit:[
{id:1,name:'wuhu',content:'hhh'},
{id:2,name:'yoho',content:'xxx'}
],
}
// 条件渲染
commitBoard=()=>{
// /解构赋值
// const {commit}=this.state
// 条件渲染
if(this.state.commit.length){
// 列表渲染
return (
<ul>
{
this.state.commit.map(item=>
(<li key={item.id}>
<h2>评论人:{item.name}</h2>
<p>评论:{item.content}</p>
</li>)
)
}
</ul>
)
}
return (
<div>暂无数据</div>
)
}
// 箭头函数解决this指向问题
handleChange=(e)=>{
const {name,value}=e.target
this.setState({
[name]:value
})
}
handleClick=()=>{
const {txt,content,commit}=this.state
let commits=commit
if(this.state.txt)
commits.push({id:Math.random(),name:txt,content:content})
else
alert('请输入内容')
this.setState({
commit:commits,
txt:'',
content:''
})
}
render(){
const {txt,content}=this.state
return(
<div>
<div>
<input type="text" name="txt" value={txt} onChange={this.handleChange}></input>
</div>
<div>
<textarea name="content" value={content} onChange={this.handleChange}></textarea>
</div>
<div>
<button onClick={this.handleClick}>发表评论</button>
</div>
<div>{this.commitBoard()}</div>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))