Ereignishandler verwenden den ursprünglichen Zustand zu aktualisieren react.js

Question

How my app looks

Ich mag die Daten senden in dem Eingabefeld an die übergeordneten Komponente und die Lage sein, in einen neuen Hund meine Liste hinzuzufügen.

Meine Eltern Komponente (das Armaturenbrett)

class PuppyDashboard extends Component { 

    state= { 
     puppy:[ 
     { name:'Tico', 
     id:'01', 
     image:'http://3.bp.blogspot.com/-K7xr2ODWTrQ/Tjx5bRDfBoI/AAAAAAAAACU/RYPmdY8181M/s1600/Yorkshire-Terrier-Pictures-08.jpg' 
     }, 
     { 
     name:'Blake', 
     id:'02', 
     image:'http://cdn-www.dailypuppy.com/dog-images/cody-the-siberian-husky_68082_2012-10-01_w450.jpg' 
     }, 

    ], 
}; 





    render() { 
    return (
     <div className="PuppyDashboard"> 
      <Grid container columns={3}> 
      <Grid.Column> 
        <PuppyList 
        puppy={this.state.puppy}/> 
       <AddWidget /> 
      </Grid.Column> 
      </Grid> 
     </div> 
    ); 
    } 
    } 

    export default PuppyDashboard; 

die addWidget, die eine Schaltfläche, um die Form in der App

 class AddWidget extends Component { 

      state = { 
      isOpen: false, 
      }; 


      handleFormOpen =() => { 
      this.setState({ isOpen: true }); 
      }; 

      handleFormClose =() => { 
      this.setState({ isOpen: false }); 
      }; 


     render() { 
     if (this.state.isOpen) { 
      return (
      <DoggyForm /> 
      ); 

      } else { 

      return (
      <div className="AddWidget"> 
       <Button fluid onClick={this.handleFormOpen} color='green'> 
       <span>+</span></Button> 

      </div> 
      ); 
     } 
     } 
     } 


    export default AddWidget; 

Und schließlich der doggyform zu öffnen ist, die den Wert in der Eingabe nimmt die Ich möchte zur übergeordneten Komponente (Puppy Dashboard) gehen

class DoggyForm extends Component { 

     state = { 
     name: this.props.name || '', 
     image: this.props.image || '', 
     }; 

     handleNameChange = (e) => { 
     this.setState({ name: e.target.value }); 
    }; 

     handleImageChange = (e) => { 
     this.setState({ image: e.target.value }); 
    }; 



    render() { 
    return (
     <div className="DoggyForm"> 
     <Form> 
      <Form.Group widths='equal'> 
      <Form.Input id='name' label='Name' placeholder='First name' 
       onChange={this.handleNameChange}/> 
      <Form.Input id='image' label='Image' placeholder='Image' 
       onChange={this.handleImageChange}/> 
      </Form.Group> 
     <Button >Submit</Button> 
     </Form> 

    </div> 
    ); 
    } 
} 

export default DoggyForm; 

Bitte any Hel p würde sehr geschätzt werden, ich plane später redux zu verwenden, aber da ich momentan ein Anfänger bin, reagiere und ich versuche die Grundlagen zu lernen. Bitte helfen Sie mir einen neuen Hund zu meiner Liste von Hunden hinzuzufügen.

Answer 1

Sie müssen nur die Daten immer wieder an die übergeordnete Komponente übergeben.

class DoggyForm extends Component { 
... 
    addDog =() => { 
     this.props.addDog(this.state.name, this.state.image); 
    } 
    render() { 
     return (
      <div className="DoggyForm"> 
       ... 
       <Button onClick={this.addDog}>Submit</Button> 
      </div> 
     ); 
    } 
} 

Für Ihre addWidget Component ...

class AddWidget extends Component { 
    ... 
    addDog = (name, image) => { 
     this.props.addDog(name, image); 
    } 
    render() { 
     if(this.state.isOpen) { 
      return (
       <DoggyForm addDog={this.addDog} /> 
      ) 
     } else { 
      ... 
     } 
    } 
} 

Für PuppyDashBoard Component ...

class PuppyDashboard extends Component { 
    ... 
    addDog = (name, image) => { 
     this.setState({ 
      puppy: [ 
       ...this.state.puppy, 
       {name, image} 
      ] 
     }) 
    } 
    render() { 
     return (
      <div className="PuppyDashboard"> 
       <Grid container columns={3}> 
        <Grid.Column> 
         ... 
         <AddWidget addDog={this.addDog} /> 
        </Grid.Column> 
       </Grid> 
      </div> 
     ) 
    } 
}