web-dev-qa-db-ja.com

ReactJSの別のコンポーネントからSetStateを呼び出す方法

私は2つの反応コンポーネントを持っています。それ、どうやったら出来るの？

reactjscomponentssetstate
8
Dennis Schweizer

次の例を参照してください。いくつかの論理または関数呼び出しを含むハンドラ（方法）を使用することを恐れてはいけません。コードを保守できるようにするのに役立ちます。

// myContainer.js
import React, { Component } from 'react'
import MyChild from 'some/path/myChild'

class MyContainer extends Component {
  state = {
    name: 'foo'
  }

  handleNameChange = name => {
    this.setState({ name })
  }

  render() {
    return (
      <MyChild name={this.state.name} onNameChange={this.handleNameChange} />
    )
  }

}

export default MyContainer

// myChild.js
import React, { Component } from 'react'

class MyChild extends Component {

  handleInputChange = event => {
    this.props.onNameChange(event.target.value)
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleInputChange} value={this.props.name} />
        <div>The name is: {this.props.name}</div>
      </div>
    )
  }

}

export default MyChild
 _
1
Kornflexx

コンポーネントの状態の更新は現在のコンポーネントに制限されているため、子コンポーネントから親コンポーネントのsetStateを直接呼び出すことはできません。

これを処理するには、setStateを含む子から子に関数を渡すだけです。そのため、親の状態を更新したい場合は、渡された関数を呼び出すだけです。

最小の例：

// Parent.jsx

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  constructor(props) {
    super(props);
    this.setChanged = this.setChanged.bind(this);
    this.state = {
      changed: false
    }
  }

  // Function to set the parent's state
  setChanged() {
    this.setState({ changed: true });
  }

  render() {
    return <Child setChanged={this.setChanged} />
  }
}

// Child.js

import React from 'react';

function Child(props) {
  return (
    // When clicked, parent's setChanged function is called
    <div onClick={() => props.setChanged()} />
  )
}
 _
2
Adam