javascript - ReactJS:“this.props.addDog(this.state.newDog);”是什么意思?在这段代码中是什么意思?
问题描述
我正在研究一个由一个主要组件组成的 React 应用程序:App.js(主要组件)和其他三个外部组件:Dog.js、DogItem.js、AddDog.js 该应用程序包含一组项目(Dogs): Dog.js,由单个狗元素、DogItem.js 和一个表单组成:AddDog.js 以添加一个新项目:狗。在 AddDog.js 文件中,我没有意识到的唯一一行是: this.props.addDog(this.state.newDog); 我在下面突出显示了它。
我想在 this.props.addDog(this.state.newDog); 中强调 addDog 与组件 AddDog 的名称不同。
这是 AddDog.js
import React, { Component } from 'react';
class AddDog extends Component {
constructor() {
super();
this.state = {
newDog:{}
}
}
static defaultProps = {
categories: ['Web Design', 'Web Development', 'Mobile Development']
}
handleSubmit(e) {
if(this.refs.name.value === '') {
alert('Title is required');
} else if (this.refs.image.value === '') {
alert('Image link is required');
} else if (this.refs.breed.value === '') {
alert('Breed is required');
} else {
this.setState({newDog:{
name: this.refs.name.value,
breed: this.refs.breed.value,
image: this.refs.image.value
}}, function() {
this.props.addDog(this.state.newDog); // <<<<<<<<<<<<<<<<<
});
}
e.preventDefault();
}
render() {
return (
<div>
<h3 id="addDog">Add Dog</h3>
<form onSubmit={this.handleSubmit.bind(this)}>
<div>
<label>Name</label><br />
<input id="dogName" type="text" ref="name" />
</div>
<div>
<label>Image</label><br />
<input id="imageURL" type="text" ref="image" />
</div>
<div>
<label>Breed</label><br />
<input id="dogBreed" type="text" ref="breed" />
</div>
<br />
<input id="submitButton" type="submit" value="Submit" />
<br />
</form>
</div>
);
}
}
export default AddDog;
这是 App.js
import React, { Component } from 'react';
import Dogs from './components/Dogs';
import DogItem from './components/DogItem';
import AddDog from './components/AddDog';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
dogs: []
};
}
getDogs() {
var defaultDogs = {dogs: [
{
name: 'Princess',
breed: 'Corgi',
image: 'https://s-media-cache-ak0.pinimg.com/originals/51/ae/30/51ae30b78696b33a64661fa3ac205b3b.jpg'
},
{
name: 'Riley',
breed: 'Husky',
image: 'http://portland.ohsohandy.com/images/uploads/93796/m/nice-and-sweet-siberian-husky-puppies-for-free-adoption.jpg'
},
]};
this.setState(defaultDogs);
}
componentWillMount() { // this soon display the two dogs before the render
this.getDogs();
}
handleAddDog(dog) {
let dogs = this.state.dogs;
dogs.push(dog);
this.setState({dogs:dogs});
}
handleDeleteDog(name) {
let dogs = this.state.dogs;
let index = dogs.findIndex(x => x.name === name); // function (x) {return x.name === name} is like x => x.name === name
dogs.splice(index, 1);
this.setState({dogs:dogs});
}
render() {
return (
<div className="App">
<Dogs dogs={this.state.dogs} onDelete={this.handleDeleteDog.bind(this)} />
<AddDog addDog={this.handleAddDog.bind(this)} />
<hr />
</div>
);
}
}
export default App;
这是 Dog.js
import React, { Component } from 'react';
import DogItem from './DogItem';
class Dogs extends Component {
deleteDog(name) {
this.props.onDelete(name);
}
render() {
let dogItem;
if (this.props.dogs) {
dogItem = this.props.dogs.map(dog => {
return (
<DogItem onDelete={this.deleteDog.bind(this)} key={dog.name} dog={dog} />
);
});
}
return (
<div className="Dogs">
<h1>Good Dogs</h1>
{dogItem}
</div>
);
}
}
export default Dogs;
这是 DogItem.js
import React, { Component } from 'react';
class DogItem extends Component {
deleteDog(name) {
this.props.onDelete(name);
}
render() {
return (
<ul className="Dog">
<img src={this.props.dog.image} href={this.props.dog.image} role="presentation" width="100" height="100"></img>
<br></br>
<strong>{this.props.dog.name}</strong>: {this.props.dog.breed} <a href="#" onClick={this.deleteDog.bind(this, this.props.dog.name)}>X</a>
<br></br>
</ul>
);
}
}
export default DogItem;
解决方案
它是来自父组件的回调函数。(在本例中为 App.js)用于在 App 的状态下将新狗添加到 dogs 数组中。
因此,当您this.props.addDog(this.state.newDog)
调用该函数时,它正在调用已由父组件作为道具传入的函数(<AddDog addDog={this.handleAddDog.bind(this)} />
在 App.js 中)
这意味着当您调用时this.props.addDog(this.state.newDog)
,
this.handleAddDog()
会在 App.js 组件中以新的 Dog 对象作为参数调用(this.handleAddDog(this.state.newDog)
其中“this.state”指的是 AddDog 组件的状态)
我希望这足够详细和清晰;)
推荐阅读
- javascript - 用户在网站上传的 SVG 图像的路径
- php - 测试 mysqli 数据库连接是否在最多 5 秒内处于活动状态
- r - scale_x_discrete 和 x 轴定位
- python-3.x - 带有pyLDAvis的Visual Studio中的ipython
- python - 按除数查找开关
- c# - C# 异常处理 finally 块在 catch 块之前
- symfony - 如何访问 base.html.twig 中的 peekAll() 以检查消息/闪烁
- visual-studio-code - 在 VS Code 中选择所有活动的缩进键盘快捷键
- sql - Flattening mutliple Rows into a single row based on identifier
- nginx - 如何在带有 nginx 的 linux 上使用没有 ssl 的 http2.0