reactで別のコンポーネントからsetStateしたい

Question

前提・実現したいこと

今現在reactを触っているのですが、やりたいことができず困ってます。
あるコンポーネントから別のコンポーネントのstateの値を変更したいです。

該当のソースコード

boxComponent/boxComponent.jsx

class boxComponent extends React.Component {
  constructor(props) {
    this.state = {
      test: ''
    }
  }
  render() {
    ...
  }
}

formComponent/formComponent.jsx

class formComponent extends React.Component {
  render() {
    return (
      <form>
        <input type="text"></input>
        <input type="submit" value="送信"></input>
      </form>
    );
  }
}

やりたいこと

formComponent.jsxの送信ボタンを押したら入力内容をboxComponent.jsxのstateのtestの値を変更したいです。
できるのでしょうか？

Comments

[退会済みユーザー]

componentAとcomponentBの関係は？親子関係なのか兄弟関係なのかとか。

[退会済みユーザー]

別々のコンポーネントです。
説明が下手ですみません。。

[退会済みユーザー]

いや、どういう関係性なのかということを上で聞いていると思うのですが。

[退会済みユーザー]

すみません。最近始めたばかりで理解が足りてません。
例えると
boxComponent(親)/boxComponent.jsx(子)
formComponet(親)/formComponet.jsx(子)
みたいな感じなのです。

[退会済みユーザー]

説明付加な場合は掲載されている説明では回答するのに足りる情報がないので、とりあえず実際のコードに似せたようなコードを掲載すると回答つきやすいとおもいます

[退会済みユーザー]

すみません。ご指摘ありがとうございます。

[karamarimo]

boxComponent(親)/boxComponent.jsx(子)というのは「boxComponent.jsx」というファイルにboxComponentというコンポーネントが定義されているということですか？teratailorさんが聞きたかったのはboxComponentとformComponetの関係だと思います。親子関係や兄弟関係というのが理解できないのでしょうか。

[退会済みユーザー]

回答しようにも回答できないですね

[退会済みユーザー]

わかりづらくてすみません。全く別のコンポーネントです。
boxComponent/component1.jsx
boxComponent/component2.jsx
component1.jsxとcomponent2.jsxの関係は兄弟。

boxComponent/component.jsx(親)
boxComponent/header/component.jsx(子)
boxComponent/component.jsxとboxComponent/header/component.jsxは親子関係。

という認識であってますでしょうか？

今回の場合は
boxComponent/boxComponent.jsx
formComponent/formComponent.jsx
boxComponent.jsxとformComponent.jsxは別のコンポーネント

[退会済みユーザー]

別なのはわかってるんです。こちらこそすみません。諦めました。

[karamarimo]

watadon111さん もしかしてフォルダ構成のことだと誤解されていますか？そうではなく、コンポーネント間の論理的な関係のことです。あるコンポーネントAのrender関数の中でコンポーネントBが使われているときAはBの親であるということです。

[退会済みユーザー]

karamarimoさん
ご丁寧にありがとうございます！
そう誤解してました。すみません。

となるとboxComponent.jsxが親、formComponent.jsxが子になります！

Answer 1

親子関係でも、兄弟関係でも、ましてや姉妹でも従兄弟でも甥でも姪でも叔父でも叔母でも曾祖父母でも夜叉孫でも会ったことが一度も無い親戚の人でもない、まったくの赤の他人であるコンポーネント同士でやり取りする場合は、何らかの方法でコンポーネント自体を渡す必要があります。

ということでサンプルを作ってみました。(CodeSandbox初めて使ったけど、回答のサンプル作るにはいいですね。)
teratail 115532 への回答 - CodeSandbox

BoxComponent.js

import React from "react";

export default class BoxComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      test: ""
    };
  }

  handleSubmit = event => {
    event.preventDefault();
    this.setState({ test: event.target.test.value });
  };

  render() {
    return <p>{this.state.test}</p>;
  }
}

FormComponent.js

import React from "react";

export default class formComponent extends React.Component {
  render() {
    return (
      <form onSubmit={this.props.box.handleSubmit}>
        <input type="text" name="test" />
        <input type="submit" value="送信" />
      </form>
    );
  }
}

index.

import React from "react";
import { render } from "react-dom";
import BoxComponent from "./BoxComponent";
import FormComponent from "./FormComponent";

const box = render(<BoxComponent />, document.getElementById("box"));
render(<FormComponent box={box} />, document.getElementById("form"));

ReactDOM.renderは作成したコンポーネントの参照(reference)を返します。これを利用して、BoxComponentを先に作り、できあがったコンポーネントをFormComponentへprops.boxとして渡しています。こうすれば、FormComponentでもBoxComponentのメソッドが使用できるようになります。他にもトップレベルに全体を管理するObjectを作っておいて、そこにrefを入れていくという手段もあります。とにかく、トップレベルで受け渡しすればなんとかなります。

さて、この方法が良いものかという、あまりオススメしません。stateが分散し、複雑化していった場合、破綻する可能性が高いからです。Reactはstateを用いてある程度は状態管理できますが、コンポーネント毎に状態が分散されてしまうため、複雑な状態を管理するには少々無理があります。より高度になる場合は、Redux等のFluxなライブラリや他のフレームワークの採用を検証した方が良いでしょう。

ただ、一番良いのは、単に親子関係や兄弟関係にしてしまうことです。親で状態を管理すれば良いだけになりますから。

Answer 2

質問内容を正しく理解しているかわかりませんが、あるコンポーネントの中に別のコンポーネントが内包されていて、内包されているコンポーネント内のボタンがクリックされると、親のコンポーネントのstateが更新させるためにはどうすれば良いのかという質問であることを前提にサンプルコードを書いてみました。

Demo

https://codesandbox.io/s/0530m6lrv

Sample Code

import React, { Component, Fragment } from 'react';
import { render } from 'react-dom';

const Child = (props) => {
  return (
    <button onClick={props.onButtonClick}>
      Click
    </button>
  );
}

class Parent extends Component {

  state = {
    isClicked: false
  };

  handleChildButtonClick = (event) => {
    this.setState((prevState) => {
      return {
        isClicked: !prevState.isClicked
      }
    });
  }

  render() {
    return (
      <Fragment>
        <Child onButtonClick={this.handleChildButtonClick} />
        <p>
          {
            this.state.isClicked ? 'clicked!' : 'not clicked yet...'
          }
        </p>
      </Fragment>
    )
  }

}

render(<Parent />, document.getElementById('root'));