ReactJS: setState บนพาเรนต์ภายในคอมโพเนนต์ลูก

อะไรคือรูปแบบที่แนะนำสำหรับการทำ setState บนพาเรนต์จากคอมโพเนนต์ลูก

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)

ฉันมีรายการสิ่งที่ต้องทำมากมายซึ่งได้รับการดูแลในสถานะของผู้ปกครอง ฉันต้องการที่จะเข้าถึงรัฐของผู้ปกครองและเพิ่มรายการสิ่งที่ต้องทำใหม่จากTodoForm's handleClickส่วนประกอบ ความคิดของฉันคือการทำ setState บนพาเรนต์ซึ่งจะแสดงรายการสิ่งที่ต้องทำที่เพิ่มใหม่

ในผู้ปกครองของคุณคุณสามารถสร้างฟังก์ชันaddTodoItemที่จะทำ setState ที่ต้องการจากนั้นส่งผ่านฟังก์ชันนั้นเป็นอุปกรณ์ประกอบฉากไปยังองค์ประกอบลูก

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: ""});
  },

  ...

});

คุณสามารถเรียกใช้addTodoItemใน handleClick ของ TodoForm สิ่งนี้จะสร้าง setState บนพาเรนต์ซึ่งจะแสดงรายการสิ่งที่ต้องทำที่เพิ่มใหม่ หวังว่าคุณจะได้รับความคิด

ซอที่นี่

ทั้งหมดนี้ถูกต้องเป็นหลักฉันแค่คิดว่าฉันจะชี้ไปที่เอกสารการตอบสนองอย่างเป็นทางการใหม่ซึ่งแนะนำโดยทั่วไป:

ควรมี "แหล่งที่มาของความจริง" แหล่งเดียวสำหรับข้อมูลใด ๆ ที่เปลี่ยนแปลงในแอปพลิเคชัน React โดยปกติสถานะจะถูกเพิ่มเข้าไปในองค์ประกอบที่จำเป็นสำหรับการแสดงผลก่อน จากนั้นหากส่วนประกอบอื่น ๆ ต้องการเช่นกันคุณสามารถยกขึ้นให้เป็นบรรพบุรุษร่วมที่ใกล้เคียงที่สุดได้ แทนที่จะพยายามซิงค์สถานะระหว่างส่วนประกอบต่างๆคุณควรใช้โฟลว์ข้อมูลจากบนลงล่าง

ดูhttps://reactjs.org/docs/lifting-state-up.html หน้ายังทำงานผ่านตัวอย่าง

คุณสามารถสร้างฟังก์ชัน addTodo ในองค์ประกอบหลักผูกเข้ากับบริบทนั้นส่งต่อไปยังองค์ประกอบลูกและเรียกใช้จากที่นั่น

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

จากนั้นใน Todos.render คุณจะต้องทำ

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

เรียกสิ่งนี้ใน TodoForm ด้วย

this.props.addToDo(newTodo);

สำหรับผู้ที่รักษาสถานะด้วย React Hook useStateฉันปรับคำแนะนำข้างต้นเพื่อสร้างแอปตัวเลื่อนสาธิตด้านล่าง ในแอปสาธิตคอมโพเนนต์แถบเลื่อนเด็กจะรักษาสถานะของผู้ปกครอง

การสาธิตยังใช้useEffectตะขอ (และที่สำคัญน้อยกว่าคือuseRefเบ็ด)

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) }}

ฉันพบวิธีแก้ปัญหาที่ใช้งานได้และเรียบง่ายต่อไปนี้ในการส่งผ่านข้อโต้แย้งจากองค์ประกอบลูกไปยังองค์ประกอบหลัก:

//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")
    );
}

ดู JSFIDDLE

หากคุณกำลังทำงานกับองค์ประกอบของคลาสในฐานะผู้ปกครองวิธีง่ายๆอย่างหนึ่งในการส่ง setState ไปยังลูกคือการส่งผ่านภายในฟังก์ชันลูกศร สิ่งนี้ใช้งานได้เมื่อตั้งค่าสภาพแวดล้อมที่ยกขึ้นซึ่งสามารถส่งผ่านไปรอบ ๆ :

class ClassComponent ... {

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