React实战：留言板

留言板

React实战：留言板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>留言板</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./src/css/index.css">
  </head>
  <body>
    <div id="root"></div>
 
   <script type="text/babel">

    let data = [
      {author:'bty',content:'悟空的自在极意功是真的厉害！！',date:'2019/2/1 下午4:00:05'},
      {author:'oppen',content:'世上只有妈妈好？爸爸呢？',date:'2019/2/1 下午3:04:05'}
    ];

    class CommentForm extends React.Component {
      handleSubmit(e) {
        e.preventDefault();
        let author = this.refs.author.value,
            content = this.refs.content.value,
            date = new Date().toLocaleString();
        this.props.handleCommentSubmit({author,content,date});
      }
      render() {
        return (
          <form className='submitform' onSubmit={(e) => this.handleSubmit(e)}>
            <div className='form-row'>
              <input type="text" placeholder='姓名' name="" ref="author"/>
            </div>
            <div className='form-row'>
              <textarea placeholder='评论' ref="content"></textarea>
            </div>
            <div className='form-row'>
              <button>发表</button>
            </div>
          </form>
        );
      }
    } 

    class Comment extends React.Component {
      render() {
        return (
          <div className='comment'>
            <div className='content'>{this.props.content}</div>
            <div className='metadata'>
              <div className='author'>{this.props.author}</div>
              <div className='date'>{this.props.date}</div>
            </div>            
          </div>
        );
      }
    }

    class CommentList extends React.Component {
      render() {
        let listShow = this.props.data.map((item,index) => {
          return (
            <Comment key={index} {...item}/>
          );
        });

        return (
          <div>
            {listShow}
          </div>
        );
      }
    }

    class CommentBox extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          data: this.props.data
        }
      }

      handleCommentSubmit(comment) {
        this.setState({
          data:this.state.data.concat([comment])
        });
      }

      render() {   
        return (
          <div className='comment-box'>
            <h1 className='title'>评论</h1>
            <CommentList data={this.state.data}/>
            <CommentForm handleCommentSubmit={(comment) => this.handleCommentSubmit(comment)}/>
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <CommentBox data={data}/>,
      document.getElementById('root')
    );
    </script>
  </body>
</html>

index.css：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
}
.comment-box {
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 15px;
  padding: 30px;
}
.title,
.comment,
.metadata,
.submitform {
  width: 100%;
}

.title {
  border-bottom: 1px solid #ccc; 
  padding-bottom: 10px;
  color: #B8860B;
  font-size: 16px;
}
.comment {
  background: #F8F8FF;
  margin-top: 20px;
  padding: 20px 20px 14px 20px;
}
.comment .content {
  width: 100%;
  font-size: 15px;
  color: #333;
}
.metadata{
  margin-top: 10px;
}
.metadata .author,
.metadata .date {
  display: inline-block;
  color: #A9A9A9;
}
.metadata .author {
  margin-right: 30px;
}

.submitform {
  margin-top: 20px;
}
.form-row {
  padding: 10px 0;
}
.form-row input[type='text'],
.form-row button,
.form-row textarea {
  border-radius: 2px;
}
.form-row input[type='text'],
.form-row textarea {
  width: 50%;
  border: 1px solid #ccc;
  padding: 8px 10px;
}
.form-row textarea {
  min-height: 100px;
}
.form-row button {
  padding: 6px;
  width: 80px;
  background: #97CBFF;
  border: 1px solid #97CBFF;
  color: #fff;
  font-size: 13px;
}
.form-row button:hover {
  cursor: pointer;
}

React实战：留言板

留言板

相关推荐