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，它将输入中的值传递给我要传递给父组件（小狗仪表板）

   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，但因为我现在是初学者，我正在努力学习基础知识。请帮我把新狗添加到我的狗列表中。

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

使用事件处理程序更新原始状态react.js

1 个答案: