下面我们以一个评论的demo来讲述如何实现这个效果:
这里有一个比较重要的知识点就是关于props传值, 关于props这里我就不多进行阐述了
首先我们先规划好整个代码结构,commentInput存放的是我们输入的用户名信息以及评论内容
- class CommentApp extends Component {
- render() {
- return (
- <div>
- <CommentInput /> //输入内容
- <CommentList /> // 展示列表
- </div>
- )
- }
- }
正如以上我们所看到的, CommentInput,CommentList是同级的两个组件, 那么我们如何才能将CommentInput内输入的值传递到CommentList中呢,从上述结构我们可以看到,CommentApp是充当了一个父组件的角色,所以它是可以充当桥接两个组件的桥梁的,即当我们点击发布按钮的时候,我们就将CommentInput中输入的评论内容传递给父组件,然后父组件再通过props将数据传递给CommentList.
接下来就来讲述下如何将CommentInput的值传递给CommentList
- class CommentInput extends Component {
- handleClick() {
- let inpText = this.refs.inp.value; //此处可以用state
- let txtText = this.refs.txt.value; //此处可以用state
- if (this.props.onSubmit) {
- this.props.onSubmit({inpText,txtText});
- }
- }
- render() {
- return (
- <div>
- <input ref="inp" style={{
- display: 'block',width: 300
- }}/>
- <textarea ref="txt" style={{
- display: 'block',width: 300,height: 100,marginTop: 20
- }}></textarea>
- <button onClick={this.handleClick.bind(this)}>发布</button>
- </div>
- )
- }
- }
好了, 这样我们就实现了简单的发布评论的功能了, 本次主要是记录如何借助父级组件从而实现同级组件之间传值。
完整代码如下所示:
- import React,{Component} from 'react';
- import ReactDOM from 'react-dom';
- import './index.css';
-
- class CommentApp extends Component {
- constructor() {
- super()
- this.state = {
- info: []
- }
- }
- handleSubmit(con) {
- this.state.info.push(con);
- this.setState({info: this.state.info})
- }
- render() {
- return (
- <div>
- <CommentInput onSubmit={this.handleSubmit.bind(this)}/>
- <CommentList listContent={this.state.info}/>
- </div>
- )
- }
- }
-
- class CommentInput extends Component {
- handleClick() {
- let inpText = this.refs.inp.value;
- let txtText = this.refs.txt.value;
- if (this.props.onSubmit) {
- this.props.onSubmit({inpText,marginTop: 20
- }}></textarea>
- <button onClick={this.handleClick.bind(this)}>发布</button>
- </div>
- )
- }
- }
-
- class CommentList extends Component {
- static defaultProps = {
- listContent: []
- }
- render() {
- return (
- <ul>
- {/*<li>{ this.props.listContent.length }</li>*/}
- {
- this.props.listContent.map((item,index) => {
- return (
- <li key={index} style={{
- listStyle: 'none'
- }}>
- <span >{item.inpText}--</span>
- <span>{item.txtText}</span>
- </li>
- )
- })
- }
- </ul>
- )
- }
- }
-
- ReactDOM.render(
- <CommentApp/>,document.getElementById('root')
- )