ReactJS: setState na rodzica wewnątrz komponentu potomnego

Jaki jest zalecany wzorzec wykonywania setState na rodzicu z komponentu podrzędnego.

var Todos = React.createClass({
  getInitialState: function() {
    return {
      todos: [
        "I am done",
        "I am not done"
      ]
    }
  },

  render: function() {
    var todos = this.state.todos.map(function(todo) {
      return <div>{todo}</div>;
    });

    return <div>
      <h3>Todo(s)</h3>
      {todos}
      <TodoForm />
    </div>;
  }
});

var TodoForm = React.createClass({
  getInitialState: function() {
    return {
      todoInput: ""
    }
  },

  handleOnChange: function(e) {
    e.preventDefault();
    this.setState({todoInput: e.target.value});
  },

  handleClick: function(e) {
    e.preventDefault();
    //add the new todo item
  },

  render: function() {
    return <div>
      <br />
      <input type="text" value={this.state.todoInput} onChange={this.handleOnChange} />
      <button onClick={this.handleClick}>Add Todo</button>
    </div>;
  }
});

React.render(<Todos />, document.body)

Mam tablicę rzeczy do zrobienia, które są utrzymywane w stanie rodzica. Chcę uzyskać dostęp do stanu rodzica i dodać nowy element do zrobienia z komponentu TodoForm's handleClick. Moim pomysłem jest wykonanie setState na rodzicu, który wyrenderuje nowo dodany element do zrobienia.

W swoim rodzicu możesz stworzyć funkcję taką jak, addTodoItemktóra wykona wymagane setState, a następnie przekaże tę funkcję jako właściwości do komponentu potomnego.

var Todos = React.createClass({

  ...

  addTodoItem: function(todoItem) {
    this.setState(({ todos }) => ({ todos: { ...todos, todoItem } }));
  },

  render: function() {

    ...

    return <div>
      <h3>Todo(s)</h3>
      {todos}
      <TodoForm addTodoItem={this.addTodoItem} />
    </div>
  }
});

var TodoForm = React.createClass({
  handleClick: function(e) {
    e.preventDefault();
    this.props.addTodoItem(this.state.todoInput);
    this.setState({todoInput: ""});
  },

  ...

});

Możesz wywołać addTodoItemw handleClick TodoForm. Spowoduje to wykonanie setState na rodzicu, który wyrenderuje nowo dodany element do zrobienia. Mam nadzieję, że masz pomysł.

Tutaj skrzypce.

Te wszystkie są zasadniczo poprawne, pomyślałem, że wskazałbym na nową (ish) oficjalną dokumentację dotyczącą reakcji, która zasadniczo zaleca: -

Powinno istnieć jedno „źródło prawdy” dla wszystkich danych, które ulegają zmianie w aplikacji React. Zazwyczaj stan jest najpierw dodawany do komponentu, który potrzebuje go do renderowania. Następnie, jeśli inne komponenty również tego potrzebują, możesz podnieść go do ich najbliższego wspólnego przodka. Zamiast próbować zsynchronizować stan między różnymi komponentami, powinieneś polegać na przepływie danych z góry na dół.

Zobacz https://reactjs.org/docs/lifting-state-up.html . Strona działa również na przykładzie.

Możesz utworzyć funkcję addTodo w komponencie nadrzędnym, powiązać ją z tym kontekstem, przekazać do komponentu potomnego i wywołać stamtąd.

// in Todos
addTodo: function(newTodo) {
    // add todo
}

Wtedy w Todos.render zrobisz to

<TodoForm addToDo={this.addTodo.bind(this)} />

Wywołaj to w TodoForm za pomocą

this.props.addToDo(newTodo);

Dla tych, którzy utrzymują stan dzięki React Hook useState , dostosowałem powyższe sugestie, aby stworzyć aplikację demonstracyjną suwaka poniżej. W aplikacji demonstracyjnej składnik suwaka podrzędnego utrzymuje stan rodzica.

Demo również używa useEffecthooka. (i co mniej ważne, useRefhak)

import React, { useState, useEffect, useCallback, useRef } from "react";

//the parent react component
function Parent() {

  // the parentState will be set by its child slider component
  const [parentState, setParentState] = useState(0);

  // make wrapper function to give child
  const wrapperSetParentState = useCallback(val => {
    setParentState(val);
  }, [setParentState]);

  return (
    <div style={{ margin: 30 }}>
      <Child
        parentState={parentState}
        parentStateSetter={wrapperSetParentState}
      />
      <div>Parent State: {parentState}</div>
    </div>
  );
};

//the child react component
function Child({parentStateSetter}) {
  const childRef = useRef();
  const [childState, setChildState] = useState(0);

  useEffect(() => {
    parentStateSetter(childState);
  }, [parentStateSetter, childState]);

  const onSliderChangeHandler = e => {
  //pass slider's event value to child's state
    setChildState(e.target.value);
  };

  return (
    <div>
      <input
        type="range"
        min="1"
        max="255"
        value={childState}
        ref={childRef}
        onChange={onSliderChangeHandler}
      ></input>
    </div>
  );
};

export default Parent;

parentSetState={(obj) => { this.setState(obj) }}

Znalazłem następujące działające i proste rozwiązanie przekazywania argumentów z komponentu podrzędnego do komponentu nadrzędnego:

//ChildExt component
class ChildExt extends React.Component {
    render() {
        var handleForUpdate =   this.props.handleForUpdate;
        return (<div><button onClick={() => handleForUpdate('someNewVar')}>Push me</button></div>
        )
    }
}

//Parent component
class ParentExt extends React.Component {   
    constructor(props) {
        super(props);
        var handleForUpdate = this.handleForUpdate.bind(this);
    }
    handleForUpdate(someArg){
            alert('We pass argument from Child to Parent: \n' + someArg);   
    }

    render() {
        var handleForUpdate =   this.handleForUpdate;    
        return (<div>
                    <ChildExt handleForUpdate = {handleForUpdate.bind(this)} /></div>)
    }
}

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

Spójrz na JSFIDDLE

Jeśli pracujesz z komponentem klasy jako rodzicem, jednym bardzo prostym sposobem przekazania setState do dziecka jest przekazanie go w funkcji strzałkowej. Działa to tak, jak ustawia podniesione środowisko, które można ominąć:

class ClassComponent ... {

    modifyState = () =>{
        this.setState({...})   
    }
    render(){
          return <><ChildComponent parentStateModifier={modifyState} /></>
    }
}