web-dev-qa-db-fra.com

Comment appelle-t-je à partir d'un autre composant dans ReactJS

J'ai deux composants réagissant et j'aimerais appeler SSTATE pour définir un état dans le composant unique, mais appelé dans l'autre. Comment je fais ça?

reactjscomponentssetstate
8
Dennis Schweizer

Voir mon exemple suivant. N'ayez pas peur d'utiliser le gestionnaire (méthode) qui contient une ou des appels logiques ou de fonction. Cela aide à garder votre code à maintenir.

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

Vous ne pouvez pas appeler directement setState sur un composant parent à partir d'un composant enfant car la mise à jour d'un état de composant est limitée au composant actuel.

Pour gérer cela, passez simplement une fonction du parent à l'enfant qui contient setState. Ainsi, lorsque vous souhaitez mettre à jour l'état du parent, appelez simplement la fonction passée.

Un exemple minimal:

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