Как мне вызвать setState из другого компонента в ReactJs - PullRequest
Новая
       36

Как мне вызвать setState из другого компонента в ReactJs

0 голосов
/ 06 марта 2019

У меня есть два реагирующих компонента, и я хотел бы вызвать setState, чтобы установить состояние одного компонента, но вызвать другой. Как мне это сделать?

Ответы [ 2 ]

2 голосов
/ 06 марта 2019

Вы не можете напрямую вызвать 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()} />
  )
}
0 голосов
/ 06 марта 2019

Смотрите мой следующий пример. Не бойтесь использовать обработчик (метод), который содержит некоторые логические или функциональные вызовы. Это помогает поддерживать ваш код в обслуживании. 

// 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
...