javascript - 如何将多个数据作为对象从 React 中的子组件发送到父组件?
问题描述
从子组件我想在父组件中传递一些数据。并且根据数据还要更新父组件的状态。我尝试了以下方式。但是每次我更改输入字段时,updatePostHandler() 都会被调用。应该只在单击按钮时调用。
父组件:
class Blog extends Component {
state = {
posts: [],
selectedPostId: null
};
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
const posts = response.data.slice(0, 3);
const updatedPosts = posts.map((post) => {
return {
...post,
author: 'Tanvir'
}
});
this.setState({ posts: updatedPosts })
});
}
selectedPostHandler = (id) => {
this.setState({ selectedPostId: id })
};
updatedPostsHandler = (post) => {
// axios.post('https://jsonplaceholder.typicode.com/posts/', post)
// .then(response => {
// }
// );
console.log(post);
}
render() {
const posts = this.state.posts.map(
post => <Post
key={post.id}
title={post.title}
author={post.author}
clicked={() => this.selectedPostHandler(post.id)} />
);
return (
<div>
<section className="Posts">
{posts}
</section>
<section>
<FullPost id={this.state.selectedPostId} />
</section>
<section>
<NewPost
newPostCreated={this.updatedPostsHandler} />
</section>
</div>
);
}
}
子组件:
class NewPost extends Component {
state = {
title: '',
content: '',
author: 'Max',
post: ''
}
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
post: {
title: this.state.title,
content: this.state.content,
author: this.state.author
}
});
}
render() {
return (
<div className="NewPost">
<h1>Add a Post</h1>
<label>Title</label>
<input type="text" name="title" value={this.state.title} onChange={this.handleChange} />
<label>Content</label>
<textarea rows="4" name="content" value={this.state.content} onChange={this.handleChange} />
<label>Author</label>
<select name="author" value={this.state.author} onChange={this.handleChange}>
<option value="Max">Max</option>
<option value="Manu">Manu</option>
</select>
<button
onClick={this.props.newPostCreated(this.state.post)}>
Add Post
</button>
</div>
);
}
}
解决方案
你需要把它写成:
onClick={() => this.props.newPostCreated(this.state.post)}>
{..}
否则,每次在do 时render()
调用 time 时,它都会在 JSX 内部执行setState(..)
。出于性能原因,最好不要使用箭头函数方式编写它。
class NewPost extends Component {
// ..
onBtnClick = () => {
this.props.newPostCreated(this.state.post);
};
render() {
return (
// ..
<button onClick={this.onBtnClick}>Add Post</button>
</div>
);
}
}
我还发现您的状态构造和 handleChange 函数有点奇怪和错误。我会这样写课程:
class NewPost extends Component {
state = {
post: {
title: "",
content: "",
author: "Max"
}
};
handleChange = ({ target }) => {
this.setState(prevState => ({
post: {
...prevState.post,
[target.name]: target.value
}
}));
};
onBtnClick = () => {
this.props.newPostCreated(this.state.post);
};
render() {
const { post: { content, title, author } } = this.state;
return (
<div className="NewPost">
<h1>Add a Post</h1>
<label>Title</label>
<input
type="text"
name="title"
value={title}
onChange={this.handleChange}
/>
<label>Content</label>
<textarea
rows="4"
name="content"
value={content}
onChange={this.handleChange}
/>
<label>Author</label>
<select
name="author"
value={author}
onChange={this.handleChange}
>
<option value="Max">Max</option>
<option value="Manu">Manu</option>
</select>
<button onClick={this.onBtnClick}>Add Post</button>
</div>
);
}
}
推荐阅读
- machine-learning - 为什么类相似度不正确?
- c++ - 带有任何旋转矩阵的 warpPerspective() 问题
- ios - iOS Simulator 自定义 City Run 在 Xcode 之外
- apache-spark - 将数据帧从 Spark 写入 Kafka 时出错 (org.apache.kafka.common.errors.RecordTooLargeException)
- python - 在pygame中拖动视图
- javascript - 使用简单的 peasy 反应商店问题,意外的渲染会弄乱商店中的模型
- pine-script - Pinescript 进入和关闭执行,延迟 1 bar
- r - 用另一个表中的“翻译”替换值
- python - 为什么这个变量超出范围?
- javascript - 如何将值从 div 提取到变量?