使用事件處理程序更新原始狀態react.js

Question

我的應用外觀

我想將在輸入字段中輸入的數據發送到父組件，並能夠向列表中添加一條新狗。

我的父組件（儀表板）

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;

addwidget，它是在應用程序中打開表單的按鈕

     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;

最后是doggyform，它在輸入中獲取要傳遞給父組件的值（puppy儀表板）

   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;

請任何幫助，我們將不勝感激，我計划以后使用redux，但由於我目前是React的初學者，因此我正在嘗試學習基礎知識。 請幫助我將一只新狗添加到我的狗列表中。

Answer 1

您只需要做的就是一次又一次地將數據傳遞到父組件。

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

對於您的AddWidget組件...

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

對於PuppyDashBoard組件...

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