react 子コンポーネントから親コンポーネントのstateを変更する

Question

class Parent extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      test: ""
    };
  }
  render() {
    return (
      <Child />
    );
  }
}




class Child extends React.Component{
  constructor(props) {
    super(props);
  }
  func() {
    //ここで親のstateのtestの値をいじりたい
  }
  render() {
    return (
      <div onClick={this.func}>btn</div>
    );
  }
}

上記のような構造で、
子のイベントで親のstateの値を変更したいのですが
可能でしょうか？

Answer 1

よっ

class Parent extends React.Component{
        constructor(props) {
                super(props);
                this.state = {
                        test: ""
                };
                this.setTest = this.setTest.bind(this)
        }
        setTest(value) {
                this.setState({
                        test: value
                })
        }
        render() {
                let test = this.state.test
                return (
                        <div>
                                <Child setTest={this.setTest} />
                                <p>test変数 : { test }</p>
                        </div>
                );
        }
}

class Child extends React.Component{
        constructor(props) {
                super(props);
                this.func = this.func.bind(this);
        }
        func() {
                this.props.setTest('New Value')
        }
        render() {
                return (
                        <div onClick={this.func}>btn</div>
                );
        }
}

ParentからChildにFuncを渡さないと、変更が出来ないと思います。
btnにクリックしたら、「test変数 : New Value」が表示されます。

:)

Comments

[cheche0830]

ありがとうございます！
やはり一方的に行うのは無理なんですね。。どうも親にも子にもメソッドを用意するのが非効率な気がしまして...

[jerome.dupuis]

Reduxを使ったら、出来ます :)
https://redux.js.org/

[jerome.dupuis]

とにかく、Reduxを使っても、使わなくて、Childは外のメソードを使う必要があります。
Parentからの場合 : 上記の例のprops.setTest()
Reduxの場合 : reducers + actions