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

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でもハイライトされるようになりました！

https://memo.brdr.jp/post/121331303391/sublime-text-3%E3%81%A7reactjs%E6%9B%B8%E3%81%8D%E3%82%84%E3%81%99%E3%81%8F%E3%81%99%E3%82%8B

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 ここを見てみてください！

週末副業記

土日は副業エンジニアのブログです。副業に関することを投稿します。

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