Як оновити стан батьків у React?

Моя структура виглядає так:

Component 1  

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5  

Component 3

Компонент 3 повинен відображати деякі дані залежно від стану компонента 5. Оскільки реквізит є незмінним, я не можу просто зберегти його стан у компоненті 1 і переслати його, правда? І так, я читав про скорочення, але не хочу його використовувати. Я сподіваюся, що це можна вирішити просто реагуючи. Я помиляюся?

Для спілкування між дитиною та батьком ви повинні передати функцію, яка встановлює стан від батька до дитини, як це

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

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

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

Таким чином дитина може оновити стан батьків при виклику функції, переданої з реквізитом.

Але вам доведеться переосмислити структуру своїх компонентів, тому що, як я розумію, компоненти 5 і 3 не пов'язані між собою.

Одне з можливих рішень - перетворити їх на компонент вищого рівня, який буде містити стан як компонента 1, так і 3. Цей компонент встановить стан нижнього рівня через реквізити.

Я знайшов таке робоче рішення для передачі аргументу функції onClick від дочірнього до батьківського компонента:

Версія з передачею методу ()

//ChildB component
class ChildB extends React.Component {

    render() {

        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div><button onClick={() => handleToUpdate('someVar')}>
            Push me
          </button>
        </div>)
    }
}

//ParentA component
class ParentA extends React.Component {

    constructor(props) {
        super(props);
        var handleToUpdate  = this.handleToUpdate.bind(this);
        var arg1 = '';
    }

    handleToUpdate(someArg){
            alert('We pass argument from Child to Parent: ' + someArg);
            this.setState({arg1:someArg});
    }

    render() {
        var handleToUpdate  =   this.handleToUpdate;

        return (<div>
                    <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentA />,
        document.querySelector("#demo")
    );
}

Подивіться на JSFIDDLE

Версія з передачею функції стрілки

//ChildB component
class ChildB extends React.Component {

    render() {

        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div>
          <button onClick={() => handleToUpdate('someVar')}>
            Push me
          </button>
        </div>)
    }
}

//ParentA component
class ParentA extends React.Component { 
    constructor(props) {
        super(props);
    }

    handleToUpdate = (someArg) => {
            alert('We pass argument from Child to Parent: ' + someArg);
    }

    render() {
        return (<div>
            <ChildB handleToUpdate = {this.handleToUpdate} /></div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentA />,
        document.querySelector("#demo")
    );
}

Подивіться на JSFIDDLE

Я хочу подякувати найвигіднішій відповіді за те, що мені дали уявлення про власну проблему, в основному, про її зміну з функцією стрілки та передачу парам з дочірнього компонента:

 class Parent extends React.Component {
  constructor(props) {
    super(props)
    // without bind, replaced by arrow func below
  }

  handler = (val) => {
    this.setState({
      someVar: val
    })
  }

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

class Child extends React.Component {
  render() {
    return <Button onClick = {() => this.props.handler('the passing value')}/ >
  }
}

Сподіваюся, це комусь допоможе.

Мені подобається відповідь щодо передачі функцій навколо, дуже зручна техніка.

З іншого боку, ви також можете досягти цього, використовуючи паб / суб або варіант, використовуючи диспетчер, як це робить Flux . Теорія дуже проста, є компонент 5, який відправляє повідомлення, який компонент 3 слухає. Потім компонент 3 оновлює свій стан, що запускає повторну візуалізацію. Для цього потрібні складові компоненти, які, залежно від вашої точки зору, можуть бути або не бути антидіаграмою. Я особисто проти них, і вважаю за краще, щоб щось інше слухало розсилки та зміни станів із самого верху вниз (Redux робить це, але додає додаткової термінології).

import { Dispatcher } from flux
import { Component } from React

const dispatcher = new Dispatcher()

// Component 3
// Some methods, such as constructor, omitted for brevity
class StatefulParent extends Component {
  state = {
    text: 'foo'
  } 

  componentDidMount() {
    dispatcher.register( dispatch => {
      if ( dispatch.type === 'change' ) {
        this.setState({ text: 'bar' })
      }
    }
  }

  render() {
    return <h1>{ this.state.text }</h1>
  }
}

// Click handler
const onClick = event => {
  dispatcher.dispatch({
    type: 'change'
  })
}

// Component 5 in your example
const StatelessChild = props => {
  return <button onClick={ onClick }>Click me</button> 
}

Пакети диспетчера за допомогою Flux дуже прості, він просто реєструє зворотні дзвінки та викликає їх, коли виникає будь-яка відправка, передаючи вміст у диспетчері (у вищенаведеному короткому прикладі немає payloadз відправленням, просто ідентифікатор повідомлення). Ви можете дуже легко адаптувати це до традиційного паб / підмережа (наприклад, використовуючи EventEmitter для подій чи іншу версію) дуже легко, якщо це має більше сенсу для вас.

Я знайшов таке робоче рішення для передачі аргументу функції onClick від дочірнього до батьківського компонента з парам:

батьківський клас:

class Parent extends React.Component {
constructor(props) {
    super(props)

    // Bind the this context to the handler function
    this.handler = this.handler.bind(this);

    // Set some state
    this.state = {
        messageShown: false
    };
}

// This method will be sent to the child component
handler(param1) {
console.log(param1);
    this.setState({
        messageShown: true
    });
}

// Render the child component and set the action property with the handler as value
render() {
    return <Child action={this.handler} />
}}

дитячий клас:

class Child extends React.Component {
render() {
    return (
        <div>
            {/* The button will execute the handler function set by the parent component */}
            <Button onClick={this.props.action.bind(this,param1)} />
        </div>
    )
} }

Коли вам потрібно вимагати спілкування між дитиною та батьком на будь-якому рівні вниз, тоді краще використовувати контекст . У батьківському компоненті визначте контекст, до якого може звертатися дитина, наприклад

У батьківському компоненті у вашому випадку компонент 3

static childContextTypes = {
        parentMethod: React.PropTypes.func.isRequired
      };

       getChildContext() {
        return {
          parentMethod: (parameter_from_child) => this.parentMethod(parameter_from_child)
        };
      }

parentMethod(parameter_from_child){
// update the state with parameter_from_child
}

Тепер у дочірньому компоненті (компонент 5 у вашому випадку) просто скажіть цьому компоненту, що він хоче використовувати контекст свого батьківського.

 static contextTypes = {
       parentMethod: React.PropTypes.func.isRequired
     };
render(){
    return(
      <TouchableHighlight
        onPress={() =>this.context.parentMethod(new_state_value)}
         underlayColor='gray' >   

            <Text> update state in parent component </Text>              

      </TouchableHighlight>
)}

ви можете знайти демонстраційний проект у репо

Здається, що ми можемо передавати дані лише від батьків до дитини, оскільки реакція сприяє однонаправленому потоку даних, але для того, щоб зробити оновлення батьків, коли щось відбувається в його "дочірньому компоненті", ми зазвичай використовуємо те, що називається "функцією зворотного виклику".

Ми передаємо дитині функцію, визначену у батьків, як "реквізит" і викликаємо цю функцію від дитини, яка запускає її в батьківському компоненті.

class Parent extends React.Component {
  handler = (Value_Passed_From_SubChild) => {
    console.log("Parent got triggered when a grandchild button was clicked");
    console.log("Parent->Child->SubChild");
    console.log(Value_Passed_From_SubChild);
  }
  render() {
    return <Child handler = {this.handler} />
  }
}
class Child extends React.Component {
  render() {
    return <SubChild handler = {this.props.handler}/ >
  }
}
class SubChild extends React.Component { 
  constructor(props){
   super(props);
   this.state = {
      somethingImp : [1,2,3,4]
   }
  }
  render() {
     return <button onClick = {this.props.handler(this.state.somethingImp)}>Clickme<button/>
  }
}
React.render(<Parent />,document.getElementById('app'));

 HTML
 ----
 <div id="app"></div>

У цьому прикладі ми можемо зробити передачу даних від SubChild -> Child -> Parent, передавши функцію прямому дочірньому.

Я багато разів використовував найкращу відповідь на цій сторінці, але, вивчаючи React, я знайшов кращий спосіб зробити це, без прив’язки та без вбудованої функції всередині реквізитів.

Подивіться тут:

class Parent extends React.Component {

  constructor() {
    super();
    this.state={
      someVar: value
    }
  }

  handleChange=(someValue)=>{
    this.setState({someVar: someValue})
  }

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

}

export const Child = ({handler}) => {
  return <Button onClick={handler} />
}

Ключ знаходиться у функції стрілки:

handleChange=(someValue)=>{
  this.setState({someVar: someValue})
}

Більше ви можете прочитати тут . Сподіваюся, це комусь стане в нагоді =)

-Ми можемо створити ParentComponent і за допомогою методу handleInputChange оновити стан ParentComponent. Імпортуємо ChildComponent, і ми передаємо два реквізити від батьківського до дочірнього компонента, тобто функцію.handleInputChange і рахуємо.

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

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      count: '',
    };
  }

  handleInputChange(e) {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  }

  render() {
    const { count } = this.state;
    return (
      <ChildComponent count={count} handleInputChange={this.handleInputChange} />
    );
  }
}

• Тепер ми створюємо файл ChildComponent і зберігаємо його як ChildComponent.jsx. Цей компонент без стану, оскільки дочірній компонент не має стану. Ми використовуємо бібліотеку типів опор для перевірки типу реквізиту.

  import React from 'react';
  import { func, number } from 'prop-types';
  
  const ChildComponent = ({ handleInputChange, count }) => (
    <input onChange={handleInputChange} value={count} name="count" />
  );
  
  ChildComponent.propTypes = {
    count: number,
    handleInputChange: func.isRequired,
  };
  
  ChildComponent.defaultProps = {
    count: 0,
  };
  
  export default ChildComponent;

Якщо цей самий сценарій не розповсюджений скрізь, ви можете використовувати контекст React, особливо якщо ви не хочете ввести всі накладні витрати, які вводять бібліотеки управління державою. Плюс до цього простіше вчитися. Але будьте обережні, ви можете цим перенапружитись і почати писати поганий код. В основному ви визначаєте компонент Container (який буде містити та зберігати цей фрагмент стану для вас), роблячи всі компоненти, зацікавлені в написанні / читанні цієї частини даних її дітям (не обов'язково направляти дітей)

https://reactjs.org/docs/context.html

Ви також можете замість цього використати звичайний React.

<Component5 onSomethingHappenedIn5={this.props.doSomethingAbout5} />

передайте doSomething About5 до компонента 1

    <Component1>
        <Component2 onSomethingHappenedIn5={somethingAbout5 => this.setState({somethingAbout5})}/>
        <Component5 propThatDependsOn5={this.state.somethingAbout5}/>
    <Component1/>

Якщо це поширена проблема, ви повинні почати думати про переміщення всього стану програми на інше місце. У вас є кілька варіантів, найпоширеніші:

https://redux.js.org/

https://facebook.github.io/flux/

В основному, замість того, щоб керувати станом програми у своєму компоненті, ви надсилаєте команди, коли щось відбувається, щоб оновити стан. Компоненти також витягують стан із цього контейнера, тому всі дані централізовано. Це не означає, що більше не можна використовувати локальний стан, але це більш розвинена тема.

тому, якщо ви хочете оновити батьківський компонент,

 class ParentComponent extends React.Component {
        constructor(props){
            super(props);
            this.state = {
               page:0
            }
        }

        handler(val){
            console.log(val) // 1
        }

        render(){
          return (
              <ChildComponent onChange={this.handler} />
           )
       }
   }


class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
             page:1
        };
    }

    someMethod = (page) => {
        this.setState({ page: page });
        this.props.onChange(page)
    }

    render() {
        return (
       <Button
            onClick={() => this.someMethod()} 
       > Click
        </Button>
      )
   }
}

Тут onChange - атрибут із методом "обробник", пов'язаний з його екземпляром. ми передали обробник методу до компонента класу Child, щоб отримати через властивість onChange в аргументі реквізит.

Атрибут onChange буде встановлений у такому об’єкті реквізиту:

props ={
onChange : this.handler
}

і перейшов до дочірнього компонента

Таким чином, дочірній компонент може отримати доступ до значення імені в об'єкті реквізиту, як цей props.onChange

Це робиться за допомогою рендерінгу.

Тепер у дочірнього компонента є кнопка "Click" із подією onclick, встановлена ​​для виклику методу обробника, переданого йому через onChnge, в його об'єкт аргументу реквізиту. Отож тепер this.props.onChange in Child містить метод виведення у батьківському класі Посилання та кредити: Біти та шматки

Це так, як я це роблю.

type ParentProps = {}
type ParentState = { someValue: number }
class Parent extends React.Component<ParentProps, ParentState> {
    constructor(props: ParentProps) {
        super(props)
        this.state = { someValue: 0 }

        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(value: number) {
        this.setState({...this.state, someValue: value})
    }

    render() {
        return <div>
            <Child changeFunction={this.handleChange} defaultValue={this.state.someValue} />
            <p>Value: {this.state.someValue}</p>
        </div>
    }
}

type ChildProps = { defaultValue: number, changeFunction: (value: number) => void}
type ChildState = { anotherValue: number }
class Child extends React.Component<ChildProps, ChildState> {
    constructor(props: ChildProps) {
        super(props)
        this.state = { anotherValue: this.props.defaultValue }

        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(value: number) {
        this.setState({...this.state, anotherValue: value})
        this.props.changeFunction(value)
    }

    render() {
        return <div>
            <input onChange={event => this.handleChange(Number(event.target.value))} type='number' value={this.state.anotherValue}/>
        </div>
    }
}

Більшість відповідей, наведених вище, стосуються дизайнів на основі React.Component. Якщо ви використовуєте useStateв останніх оновленнях бібліотеки React, дотримуйтесь цієї відповіді

<Footer 
  action={()=>this.setState({showChart: true})}
/>

<footer className="row">
    <button type="button" onClick={this.props.action}>Edit</button>
  {console.log(this.props)}
</footer>

Try this example to write inline setState, it avoids creating another function.