更新孩子的狀態

Question

比方說，我父組件有兩個子組件：

Parent 
| Child1 
| Child2 

我'正從CHILD2和我'把它傳遞給父組件的輸入（到現在爲止，我知道該怎麼做）。但後來我需要將該輸入傳遞給Child1以更新它的狀態。

我該怎麼做？

Answer 1

希望你能得到主要思想 - 在父組件tha中創建一個函數t會改變傳遞給Child1的值。 ReactJS: Why is passing the component initial state a prop an anti-pattern?

class Parent extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     value: "" 
    } 
    } 
    changeValue(value){ 
    this.setState({value}); 
    } 
    render(){ 
    return (
     <div> 
      <Child1 value={this.state.value}/> 
      <Child2 changeValue={changeValue}/> 
     </div> 
    ) 
    } 
} 


class Child2 extends Component { 
    constructor(props) { 
    super(props); 
    this.state={ 
     input: "" 
    } 
    } 
    handleChange(e){ 
    var {value} = e.target; 
    this.setState({ 
     input: value 
    },() => this.props.changeValue(value)); 
    } 
    render(){ 
    return (
     <div> 
      <input value={this.state.input} onChange={this.handleChange}/> 
     </div> 
    ) 
    } 
} 



class Child1 extends Component { 

    constructor(props) { 
    super(props); 
    this.state={value:''} 
    } 
    componentWillReceiveProps(nextProps) { 
    this.setState({value: nextProps.value}) 
    } 


    render(){ 
    return (
     <div> 
      {this.props.value} 
     </div> 
    ) 
    } 
} 

Answer 2

您可以在您的子組件中有一個函數，該函數根據父組件發送的值更新狀態。你可以訪問子組件的函數形式使用refs

例父組件

家長：

class Parent extends React.Component { 
    funcUpdateChild1 =() => { 
      this.child1.updateState('value here'); 
    } 
    render() { 
      return (
       <Child1 ref={(ip) => {this.child1 = ip}} /> 
       <Child2 ref={(ip) => {this.child2 = ip}} /> 
     ) 
    } 
} 

Child1

class Child1 extends React.Component { 
    updateState = (value) => { 
     //use the value to set state here 
    } 
    render() { 
      return (
       //child1 contents here 
     ) 
    } 
} 

Answer 3

Child { 

    constructor (props){ 
     super(props) 
     this.state = { 
      data: this.props.data 
     } 
    } 


    render(){ 
     if (this.props.data != this.state.data){ 
      this.setState({data : this.props.data}) //update data from parent if they are different 
     } 
     return (
      <Text>{this.state.data}</Text> 
     ) 
    } 
} 



Parent { 

    constructor (props){ 
     super(props) 
     this.state = { 
      data: 'new string' 
     } 
    } 


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

希望它可以幫助

Answer 4

**組件父**

import React from 'react'; 
    import MM from './modall'; 
    class App extends React.Component { 
     constructor() { 
      super(); 
      this.state = { 
       naslov:'', 
       telo:'' 
      }; 
      this.setStateHandler = this.setStateHandler.bind(this); 
      this.postaviStanje = this.postaviStanje.bind(this); 
      this.Stanje = this.Stanje.bind(this); 
     } 
     setStateHandler() { 
      this.setState({ naslov: "Naslov Prvi u Modalu", telo:"Novo Prvo telo modala"}); 

     }; 
     postaviStanje(){ 
      this.setState({naslov: " Novi drugi u Modalu", telo:"Novo drugo telo modala"}); 
     }; 
     Stanje(){ 
      this.setState({naslov: " Novi treci u Modalu", telo:"Novo trece telo modala"}); 

     }; 
     render() { 
      return (
       <div> 
        <button onClick = {this.setStateHandler} data-toggle="modal" data-target="#modal">SET STATE</button> 
        <button onClick = {this.postaviStanje} data-toggle="modal" data-target="#modal">SET STATE2</button> 
        <button onClick = {this.Stanje} data-toggle="modal" data-target="#modal">SET STATE3</button> 
        <MM telo={this.state.telo} naslov={this.state.naslov} />) 

       </div> 
      ); 
     } 
    } 
    export default App; 

構成元素孩子

/** 
    * Created by trika on 31-Jan-18. 
    */ 
    import React,{Component} from 'react'; 

    class Modal extends Component{ 
     constructor(props) { 
      super(props); 
      this.state = { 
       naslov:this.props.naslov, 
       telo: this.props.telo 
      }; 
     } 

     render(){ 

      return(
       <div className="modal" id="modal" role="dialog"> 
        <div className="modal-dialog" role="document"> 
         <div className="modal-content"> 
          <div className="modal-header"> 
           <h1 className="modal-title"><strong>{this.props.naslov}</strong></h1> 
           <button type="button" className="close" data-dismiss="modal" aria-label="Close"> 
            <span aria-hidden="true">&times;</span> 
           </button> 
          </div> 
          <div className="modal-body"> 
           <p>Modal body text goes here.</p> 
           <h2><strong>{this.props.telo}</strong></h2> 
          </div> 
          <div className="modal-footer"> 
           <button type="button" className="btn btn-primary">Save changes</button> 
           <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      ); 
     } 
    } 

    export default Modal;