[英]Using event handler to update the original state react.js
我想将在输入字段中输入的数据发送到父组件,并能够向列表中添加一条新狗。
我的父组件(仪表板)
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的初学者,因此我正在尝试学习基础知识。 请帮助我将一只新狗添加到我的狗列表中。
您只需要做的就是一次又一次地将数据传递到父组件。
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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.