【React】react-bootstrapのmodal内容をonClickで書き換えたい。

Question

###前提・実現したいこと
初めての質問の為、分かりにくい部分があったら申し訳御座いません。

react-bootstrapのmodalを使って制作したフォームで
送信時にModal.Bodyに指定したテキストを表示したい。

###発生している問題・エラーメッセージ
エラーメッセージ等はコンソールに表示されておりません。
送信ボタンを押した時は内容に変化無しですが、
ModalのCloseボタンを押した時に止まっていた処理が実行されるようで
改めてModalを開くと内容が書き換わっているのが確認出来ます。

処理部分：
let p = findDOMNode(this.refs.text);
p.textContent = this.state.data;

render部：

<p ref="text"></p>

上記のようにすれば無理矢理書き換える事は出来ますが
スマートでないので…。

###該当のソースコード

class ModalArea extends React.Component{
    constructor(props, context){
        super(props, context);
        this.state = {showModal: false}
        this.open = this.open.bind(this);
        this.close = this.close.bind(this);
    }
    open() {
        this.setState({showModal: true});
    }
    close() {
        this.setState({showModal: false});
    }
    formSubmit(e){
       e.preventDefault();
       var text = e.target.value;
       this.state = {data:"表示したい内容"}
    }

    render(){
        return(
        <Modal className="modal-container"
          show={this.state.showModal}
          onHide={this.close}
          animation={true}
          bsSize="small">
          <Modal.Header closeButton>
            <Modal.Title>タイトル</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div>
              <FormGroup>
                  <FormControl type="text" ref="text" />
                  <p>{this.state.data}</p>
              </FormGroup>
              <FormGroup>
                  <Button bsStyle="primary" bsSize="large" onClick={this.formSubmit.bind(this)} block >送信</Button>
              </FormGroup>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
          </Modal.Footer>
        </Modal>
        );
    }
}

###試したこと
処理のタイミングかと思いcomponentDidMount等も試して見たのですが、どうもうまく動作せず。

どうぞ宜しくお願い致します。

Answer 1

実行してみてはいないのですが

this.state = {data:"表示したい内容"}

ここが

this.setState({data:"表示したい内容"})

ではないでしょうかね。ご提示のコードでは this.state を直接書きかえてしまっているので、その処理中では re-render されないため見た目上変化がないのだと考えられます。

今回はたまたま typo かも知れませんが state を更新したいときは常に setState() を利用します。

Comments

[Point]

ご回答ありがとうございます！

おっしゃるとおり変更しましたら、希望通りの動作が確認できました！
「this.state = 」と「this.setState()」は同じだと思ってたのですが違うんですね。
更新したい場合としたくない場合に使い分ける用という感じなのでしょうか。

とにかく実装でき大変助かりました！ありがとうございます！

[iktakahiro]

解決したようでよかったです。

使い分けについてですが、state を更新する場合は 常に `setState()` を利用するのが作法のようです。

> Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

- https://facebook.github.io/react/docs/react-component.html#state

特定の state の状態と再描画の有無を関連付けたい場合は `shouldComponentUpdate()` を利用することになると思います。当該のメソッドで false を返すと re-render が発生しません。

- https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

ただ、state は更新したいけれど表示には反映したくないという状況はあまり思いつかず、明確にその必要性がない限りは単純に `setState()` を利用するだけ特に他には何もしない、という方法でよいと考えています。

[Point]

ご返信ありがとうございます！

なるほど、今後は直接代入より常にsetState()を使う方が良さそうですね。勉強になりますっ！

shouldComponentUpdata()…また覚えないといけない項目ですね。
DidとかWillConponentもまだうまく理解出来てなくて課題が盛りだくさんです。

本当に丁寧にお答え頂き有り難うございました！