使用React實現一個微博傳送表單

表單的需求：

（1）輸入框獲取焦點時，輸入框邊框變為橙色，右上角顯示剩餘字數的提示；輸入框失去焦點時，輸入框邊框變為灰色，右上角顯示熱門微博。

（2）輸入字數小於且等於140字時，提示顯示剩餘可輸入字數；輸入字數大於140時，提示顯示已經超過字數。

（3）輸入字數大於0且不大於140字時，按鈕為亮橙色且可點選，否則為淺橙色且不可點選。

GitHub：https://github.com/heyue-99/weibo-form

建立專案

初始化專案並建立一些基礎檔案

初始化專案之後，就需要安裝所需要的庫及其依賴。npm安裝方式可以為開發環境或生產選擇所安裝的依賴。

安裝完所需要的依賴之後，配置webpack。

webpack.config.js:

    var path = require("path");  
    module.exports = {  
      entry: {  
        app: ["./app/app.js"]  
      },  
      output: {  
        path: path.resolve("./build"),  
        filename: "main.js"  
      },  
      module: {  
        loaders: [  
          {  
            test: /\.js$/,  
            exclude: /(node_modules|bower_components)/,  
            use: {  
              loader: 'babel-loader',  
              options: {  
                presets: ['env','react']  
              }  
            }  
          },  
          {  
            test: /\.css$/,  
            use: [ 'style-loader', 'css-loader' ]  
          },  
          {  
            test: /\.less$/,  
            use: [{  
                    loader: "style-loader" // creates style nodes from JS strings  
                  }, {  
                    loader: "css-loader" // translates CSS into CommonJS  
                  }, {  
                    loader: "less-loader" // compiles Less to CSS  
                  }]  
          }  
          ]}  
    };  
 

weibo-form

因為是一個簡單的表單，所以不需要繼續劃分子元件

表單分為上中下三部分，包括熱門微博和剩餘字數的提示（title）、輸入框（textarea）、釋出按鈕（button）。

給 textarea 新增 onFocus、onBlur、onChange 事件，通過handleFocus、handleBlur、handleChange 來處理輸入框獲取焦點、失去焦點和輸入。

然後將輸入的內容的長度（length）放在在 state 裡，這樣每當內容發生變化時，就能方便的對變化進行處理（this.state.number）。

對於按鈕的變化、熱門微博和提示之間的轉換，根據 state

app.js

import React from "react";
import ReactDOM from "react-dom";
//import css from './style.css';
require('./style.css')

//TodoList元件是一個整體的元件，最終React也只渲染這個元件
var TodoList = React.createClass({
	render: function(){
		return(
				<div>
					<ListTodo />
				</div>
			);
	}
});

var ListTodo = React.createClass({
	getInitialState: function(){
		return{
			number: 0
		};
	},

	addContent: function(e){
		e.target.style.border = "2px solid #fa7d3c";
		this.refs.link.style.display = "none";
		this.refs.tip.style.display = "block";
	},

	handleBlur: function(e){
		e.target.style.border = "2px solid #cccccc";
		this.refs.link.style.display = "block";
		this.refs.tip.style.display = "none";
	},

	handleChange: function(e){
		this.setState({
			number: e.target.value.length
		});
	},

	render: function(){
		return(
		<div>
			<div className="title">
				<div ref="link">
					<a href="#">三生三世十里桃花</a>
				</div>
				<div className="tip" ref="tip">
					<span>{this.state.number<=140 ? '還可以輸入' : '已超出'}<strong>{this.state.number<=140 ? 140-this.state.number : this.state.number-140}</strong>字</span>
				</div>
			</div>
			<form>
				<textarea onFocus={this.addContent} onBlur={this.handleBlur} onChange={this.handleChange}></textarea>
				<input type="submit" value="釋出" className={this.state.number>0 && this.state.number<=140 ? 'submit' : 'disabled'} disabled={this.state.number>0 && this.state.number<=140 ? '' : 'disabled'} />
			</form>
		</div>
		);
	}
});

ReactDOM.render(
	<TodoList />,
	document.getElementById("example")
);

style.css

.tip{
	display: none;
}
textarea{
	border: 2px solid #cccccc;
	padding: 5px 5px;
	width: 600px;
	height: 100px;
	box-sizing: border-box;
	box-shadow: 0 0 2px rgba(0,0,0,0.15);
    border-radius: 2px;
}
.title{
	float: right;
	margin-bottom: 10px;
}
.title a{
	text-decoration: none;
	color: #896FFC;
}
.title .tip{
	color: #8B8A8A;
}
form .submit{
	float: right;
	width: 90px;
	height: 30px;
	font-size: 14px;
    background: #ff8140;
    border: 1px solid #f77c3d;
    border-radius: 2px;
    color: #fff;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.25);
    margin-top: 10px;
    cursor: pointer;
}
 form .disabled {
 	float: right;
	width: 90px;
	height: 30px;
	font-size: 14px;
    background: #ffc09f;
    color: #fff;
    border: 1px solid #fbbd9e;
    border-radius: 2px;
    box-shadow: none;
    margin-top: 10px;
}

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
    </head>  
    <body>  
    <div id="example" style="width: 430px; margin: 100px auto;"></div>  
    <script type="text/javascript" src="/main.js"></script>  
    </body>  
    </html>