react评论框

react 评论框

做一个这样的页面出来

首先分为四个组件，Cheader，Cform，Clist，Citem。每个组件做自己的事情，然后在app.js里面进行引用。用了bootstrap框架

做出来的效果

遇到的问题

最大的问题就是bootstrap框架应用的问题出来的效果不是我想要的效果，

出来的这个效果，自我感觉是版本兼容除了问题，然后搜百度，后来发现确实是版本的问题，因为我应用的是官方文档3里面的组件和css全局效果，但是我用npm自动下载的是最新版本。然后把4版本卸载了，重新下载了3版本，结果发现还是错误，说找不到文件，然后bootstrap文件夹，发现我根据网上引入的CSS文件没有了，重新引入了另一个CSS文件，结果就出来了。

接下来是各个页面的代码

app

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Cheader from './components/Cheader'
import Clist from "./components/Clist"
import Cform from "./components/Cform"

  class App extends Component {
    //构造方法是组件第一个执行的部分，所以我们要把初始化的信息放在构造方法下面。
    constructor(){
        super();
 //定义一个数组，放对象
        this.state={
                    arr:[
                        {id:1,author:"admin",content:"nihao"},//作者admin，内容content
                        {id:2,author:"admin1",content:"nihaoaa"},
                        {id:3,author:"admin2",content:"nihaoll"}
                        ]
                }
    }
 //定义一个方法，改变数据的方法，子组件调用这个方法达到改变数据的效果。
      //想改变这个数组，的加一个参数，告诉它想改变那个数据，
    Changearr(data){

       //首先需要通过this.state.arr拿到数据
        var oldarr=this.state.arr;
        //然后把这个子组件传过来的data给它加进去
        oldarr.push(data);
        //通过这个方法把数据设置回去
        this.setState(
            {
                arr:oldarr
            })
    }
  render() {
  return (
    <div className="app">
          <Cheader/>
        <div className="container">
          <div className="col-md-6">
           //在react下面数据的流向是单向数据流，自上而下的，有父组件往子组件里面去流
              //app.js相当于是一个父组件，他想把数据给clist这个子组件，通过给它加个属性
            <Clist arr={this.state.arr}/>
          </div>
            <div className="col-md-6">
               //这个组件里面需要定义一个方法，告诉子组件需要调用那个一方法
               <Cform change={this.Changearr.bind(this)}/>
                //添加一个change事件，给子那数据用的        </div>
        </div>
      </div>


    );
  }
}

  export default App;

cheader

import React from 'react'
import logo from '../logo.svg';


export default function Cheader() {
        return (
            <nav className="navbar navbar-default">
                <div className="container-fluid">
                    <div className="navbar-header">
                        <a className="navbar-brand" href="#">
                            <img alt="Brand" src={logo} width="50px"/>
                        </a>
                        <h4>欢迎来到react练习评论框</h4>
                    </div>
                </div>
            </nav>
        )
}

###clist

import React from 'react'
import Citem from './Citem'
export default  class Clist extends React.Component{
    constructor () {
        super();
    }
    render () {

        var arrlist=[];
        //这个是拿父给它的数据
        this.props.arr.forEach(i,index)=>{
            //添加，每便利一条数据都应该作为一个列表显示出来，里面放的是citem
            //每遍历一次就会生成一个citem
            arrlist.push(<Clist key={index} author={i.author} content={i.content}></Clist>)
        }
  
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    <h3 className="panel-title">评论列表</h3>
                </div>
                <div className="panel-body">
  //整个存放citem的数组展示出来{arrlist}
                    {arrlist}
                </div>
            </div>
        )
    }

}

###citem

import React from 'react'
import App from "../App";

export default  class Citem extends React.Component{
    constructor(){
        super();
    }
    render(){
        return(
         <div>
             <h2>{this.props.author}</h2>
             <p>{this.props.content}</p>

         </div>
        )
    }
}

###cfrom

import React from 'react'

export default  class Cform extends React.Component{
    constructor(){
        super();
        //想要拿到内容首先需要存起来
        this.state={
            author:"",
            content:""
        }
        //所有定义的方法都需要家bind（this），两种写法，下面还有一种
        this.formsubmit=this.formsubmit.bind(this);
    }
    //借助event事件对象，重置里面的值。
   authorChange(e){
        //this指向我们的组件。在加个bind（this）
       this.setState({
          author:e.target.value
       })
   }
    contentChange(e){
        this.setState({
            content:e.target.value
        })
    }

    formsubmit(e){
        //阻止一下元素默认行为
        e.preventDefault();
        //这个方法就是定义一个提交表单的方法 需要把填的名字内容传递出去
        //那父组件的change事件。
        this.props.change({
            author:this.state.author,
            content:this.state.content
        })
 }
    render(){
      return (

            <div className="panel panel-default">
                <div className="panel-heading">
                    <h3 className="panel-title">请评论</h3>
                </div>
                <div className="panel-body">
                    //子传父，点击提交的时候，要往数组里面创造一条数据出来，
                    //先要调用from里面的一个onSubmit方法，这是一个方法，就需要在上面定义一个
                   <form onSubmit={this.formsubmit}>
                      <div className="form-group">
                          //当数据发生变化的时候需要调用，写好以后在上面定义方法
                          //
                         作者：<input type="text" onChange={this.authorChange.bind(this)} className="form-control" id="exampleInputEmail1" placeholder="请输入..."/>
                      </div>
                      <div className="form-group">
                        内容： <input type="text" onChange={this.contentChange.bind(this)} className="form-control" id="exampleInputPassword1" placeholder="请输入..."/>
                      </div>
                      <button type="submit" className="btn btn-default">提交</button>
                   </form>
                </div>
            </div>
      )
    }
 }