阿里云服务器0元试用,首购低至0.9元/月起
【开发云】年年都是折扣价,不用四处薅羊毛
前置内容阅读 React学习(六):React学习(六):Forms(表单)实例 - 留言框
效果预览
1. 环境准备
// 启动工程
npm start
// index.js 中引入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
2. 编写组件
a. 新建 src\componets\CommentList.js
import React from "react";
const CommentList = ({ comments }) => {
return (
<div className="comment-list-component">
<label>评论列表</label>
<ul className="list-group mb-3">
{
comments.map((comment, index) =>
<li key={index} className='list-group-item'>{comment}</li>
)
}
</ul>
</div>
)
}
export default CommentList
b. 修改 src\App.js
import logo from './logo.svg';
import './App.css';
import CommentBox from './componets/CommentBox';
import { Component } from 'react';
import CommentList from './componets/CommentList';
class App extends Component {
constructor(props){
super(props)
this.state = {
comments: ['this is my first reply']
}
// 绑定
this.addComent=this.addComent.bind(this)
};
addComent(comment){
this.setState({
// 使用es6中的三个点表达式
comments: [...this.state.comments, comment]
})
}
render() {
const { comments } = this.state
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<CommentList comments={comments} />
<CommentBox
commentsLength={comments.length}
onAddComent={this.addComent}
/>
</div>
);
}
}
export default App;
c. 修改 src\componets\CommentBox.js
详情
import React from "react";
class CommentBox extends React.Component {
constructor(props) {
super(props)
this.state = {
value : ''
}
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(event){
this.props.onAddComent(this.textInput.value)
// 提交之后将文本框置空
this.textInput.value=''
// 禁止默认跳转行为
event.preventDefault()
}
render() {
return (
<form className="p-5" onSubmit={this.handleSubmit}>
<div className="form-group">
<label>留言内容</label>
<input
type="text"
className="form-control"
placeholder="请输入内容"
// 非受控组件写法
ref={(textInput) => {this.textInput = textInput}}
/>
</div>
<button type="sumbit" className="btn btn-primary">留言</button>
<p>已有{this.props.commentsLength}条评论</p>
</form>
)
}
}
export default CommentBox
d. 结果预览