読者です 読者をやめる 読者になる 読者になる

aisaka.com

自分が知りたかったこと・日々の思考・共有したいニュースを発信

React攻略への道のり[3日目][state]

Everything is practice.

f:id:aisakakun:20160825150413j:plain

今日はstate使います。

stateは、使用者の行動によって値が変化するようなときに
使う
みたいです。(ex:クリックとか)

なので、今回はクリックの動作も含めたコードを書いてみました。

サンプルとしては、こんな感じ。

var State = React.createClass({
	getInitialState (){
		return{
			test_count:1
		};
	},
	onClick(){
		this.setState({test_count:this.state.test_count + 1});
	},
	render(){
		return(
			<div>
        	<span>{this.state.test_count}</span>
        	<button onClick={this.onClick}>click</button>
      		</div>
		);
	}
});

([1]より引用)

このコードのうち、「onClick」とか「test_count」の部分とかは適当に変えても問題ありません。sublime textだと、jsxの関数だとしても色がつかないので、ユーザーが定義した関数かどうかが分からないので、ちょっと不便に感じます。。。
→ハイライトできました→*1

とりあえず、このコードを元のコードに挿入すると、

<html>
<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>

<div id="module"></div>

<script type="text/jsx">
var Editor = React.createClass({
    getInitialState: function() {
        return {value: "Type Something here"};
    },
    handleChange: function() {
        this.setState({value: this.refs.textarea.value});
    },
    render: function() {
        return (
            <div className="Editor">
            <h3>Input</h3>
            <textarea
            onChange={this.handleChange}
            ref="textarea"
            defaultValue={this.state.value} />
            <h3>Output</h3>
            <div 
            dangerouslySetInnerHTML={{__html: this.state.value}}
            />
            <Comment author="Pepe Hunt">sasa</Comment>
            <Comment author="asasa" />
            <State />
            </div>
        );
    }
});

var Comment = React.createClass({
  render: function() {
    return (
    <div>
      <h2>
        {this.props.author}
      </h2>
      {this.props.children}
    </div>
    );
  }
});

var State = React.createClass({
	getInitialState (){
		return{
			test_count:1
		};
	},
	onClick(){
		this.setState({test_count:this.state.test_count + 1});
	},
	render(){
		return(
			<div>
        	<span>{this.state.test_count}</span>
        	<button onClick={this.onClick}>click</button>
      		</div>
		);
	}
});

ReactDOM.render(<Editor />, document.getElementById('module'));
</script>
</html>

そして、出力画面はこんな感じ。
f:id:aisakakun:20160825145952p:plain

「click」と書かれている場所をクリックすると、数字が増えていきます。
使用者の動作によって変化する値として「click」を採用しました。
次は画像を表示させるのとかやってみようかな、と思います。
それかデザイン変えたい。

参考URL:[1]:React.jsのState - Qiita

*1:追記:ここのサイトを参考にしたらjsxでもハイライトされるようになりました!

http://memo.brdr.jp/post/121331303391/sublime-text-3でreactjs書きやすくする
memo.brdr.jp 1. sublime text を起動→ 2. [Command]+[shift]+p → 3.delete → 4.Package Controll: Install Packageと入力 → 5.Babelと入力 → 6.Babelが一番上に出てくるのでそれをクリック。 → jsxだけなら、これだけでできました。 ちなみに、Package Controll なんてない! という場合は、 nettan.info ここを見てみてください!