stateとpropsを使って、viewの表示を変える

書く動機

共通で使ってるコンポーネントで、「ここの文言だけこっちにして〜」と言われて、「えっと、、それめちゃめんどいんじゃね？」ってなったんですが、瞬殺で終わったのでその理由について（こういう時にべんりなのであろうreact）

状況

A画面でユーザーが情報を入力し、進むボタンを押すとB画面で確認画面がでてOKなら
「はい」、修正したければ「いいえ」ボタンをおすという仕様。
ー＞B画面の「いいえ」ボタンを「戻る」に修正したい　という要望
B画面で利用している「はい」「いいえ」ボタンは共通のコンポーネントを利用してる

構成

A画面を構成する　A.jade, A.coffee
B画面を構成する　B.jade, B.coffee

A.jade

B(onConfirmed = handleSubmit, onAborted = handleAbort)

A.coffee

module.exports = React.createClass
  handleSubmit: ->
    @props.onSucceed() #実行する関数

  handleAbort: ->
    @props.onBack（） #前の画面に戻る関数

B.jade

button.css_class_yes(onClick = handleYes)=　yes
button.css_class_no(onClick = handleNo)=　no

B.coffee

module.exports = React.createClass
  getDefaultProps: ->
    message: 'よろしいですか？'
    yes: 'はい'
    no: 'いいえ'

  handleYes: (e) ->
    e.stopPropagation()
    @props.onConfirmed()

  handleNo: (e) ->
    e.stopPropagation()
    @props.onAborted()

既存の流れ

諸々省略してるのでちょっとわかりにくいですが（Aの中身とか一切書いてないw）、流れを見ていくと

１）A.jade　でBをよぶ。その際に渡す値としてonConfirm,onAbortedの２つを渡している。
onConfirm,onAbortedにはA.coffeeの　実行する関数、前の画面に戻る関数が入ってる。

２）B.jadeではyes,noボタンがあり、
yesを押すと、@props.onConfirmed()
noを押すと、@props.onAborted()の関数が実行される。
このとき、yesnoにはB.coffeeのgetDefaultPropsに記載のある

yes: 'はい'
no: 'いいえ'

と

message: 'よろしいですか？'

が渡される

やりたいこと

やりたいことは
no:'いいえ'を　no:'戻る'にしたい。

最初から流れが頭に入ってればすんなりいきそうだけど、イマイチ理解してないと辛い。
ではやってみると。。。

当然だけど

getDefaultProps: ->
    message: 'よろしいですか？'
    yes: 'はい'
    no: 'いいえ'

ここを書き換えてはいけませんw

他のコンポーネントも変わってしまうのでw
ここで注目すべきは上記がgetDefaultPropsであるということ。これってなんでしたっけ。
http://qiita.com/koba04/items/bc13d1f42964278ae14e

要はデフォルト値を作ってくれるんです。デフォルトということは変えてしまえばよい。
じゃあどこで変えるのか？

ここでreactの超基本に戻ると、データの受け渡しの流れは

親 ー＞ 子
A ー＞ B
親から子に渡されたデータは@propsとして子に渡されてる

はいなんかさっき出てきてましたね。

B.coffee

module.exports = React.createClass
  getDefaultProps: ->
    message: 'よろしいですか？'
    yes: 'はい'
    no: 'いいえ'

  handleYes: (e) ->
    e.stopPropagation()
    @props.onConfirmed()

  handleNo: (e) ->
    e.stopPropagation()
    @props.onAborted()

@props.onConfirmed() @props.onAborted()
ほほう、、、こいつらは。。？

A.jade

B(onConfirmed = handleSubmit, onAborted = handleAbort)

A.jadeにいますな。。。
つまり、、？
A.jade

B(onConfirmed = handleSubmit, onAborted = handleAbort,　no = '戻る')

としちゃえばいいのである。

propsとして親から子に渡したい（値を変えたい）時は、親側の関数で引数に値を渡してあげればい良いですね。※わかりにくくなってるんは渡す引数がまた関数だったりするからややこしい。
stateは親からもらった値とか、そのcomponent上で値を上書きしたりする時に使うので、
ここでstateは関係ないっすね。

書いてみたけど、jsをちゃんと書いたことないからイマイチ嬉しさがわからない。
はやくjsをかいてみよう