我想从AddPost组件道具传递给AllPosts组件按钮被点击AddPost只有当。
另外如何保持增加新岗位的数据(帖子,标题,keyid的)从AddPost在AllPosts一个对象‘newArray’每次按钮被点击,这个新的数据被应用的地图保存allposts数组中,然后显示每一个岗位它的功能。
我面临的问题,我如何能得到AddPost在NEWOBJECT新的数据不断保持allposts阵列在推动呢?
AddPost.js
class Addpost extends Component {
constructor(props) {
super(props);
this.state = {
title : '',
post : '',
keyid : 0
}
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
[event.target.name] : event.target.value
})
}
handleClick() {
this.setState(prevState => ({
keyid : prevState.keyid + 1,
post : '',
title : ''
}));
console.log(this.state.keyid);
}
render() {
return(
<div>
<input type="text" name="title" value={this.state.title} onChange={this.handleChange} maxLength="30" placeholder="Title here" />
<input type="text" name="post" value={this.state.post} onChange={this.handleChange} maxLength="200" placeholder="Post here" />
<input type="button" onClick={this.handleClick} value="Add Post" />
<Allposts post={this.state.post} title={this.state.title} keyid={this.state.keyid} />
</div>
)
}
}
AllPosts.js
class Allposts extends Component {
constructor(props) {
super();
this.state = {
newObject : {
post : '',
title : '',
keyid : ''
},
allPosts : []
}
}
render() {
return (
this.state.allPosts.map((post) =><div>
{ post.post}{post.title}{post.keyid}
</div>
)
)
}
}
一个更好的办法来解决你的问题是保持AllPosts和Addpost成分分离和他们的家长成分呈现
post.js
class Post extends React.Component {
state: {
allPosts: []
}
addPost = (post) => {
this.setState(prev => ({allPosts: prev.allPosts.concat([post])}))
}
render() {
<>
<Addpost addPost={this.addPost}/>
<AllPosts allPosts={this.state.allPosts} />
</>
}
}
Addpost.js
class Addpost extends Component {
constructor(props) {
super(props);
this.state = {
title : '',
post : '',
keyid : 0
}
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
[event.target.name] : event.target.value
})
}
handleClick() {
const { keyid, post, title } = this.state;
const post = { keyid, post, title };
this.props.addPost(post)
this.setState(prevState => ({
keyid : prevState.keyid + 1,
post : '',
title : ''
}));
}
render() {
return(
<div>
<input type="text" name="title" value={this.state.title} onChange={this.handleChange} maxLength="30" placeholder="Title here" />
<input type="text" name="post" value={this.state.post} onChange={this.handleChange} maxLength="200" placeholder="Post here" />
<input type="button" onClick={this.handleClick} value="Add Post" />
</div>
)
}
}
Allposts.js
const Allposts = () => {
return (
this.props.allPosts.map((post) => (
<div>
{ post.post} {post.title} {post.keyid}
</div>
))
)
}
但是,如果你只想要点击后通过道具,你需要保持写着点击与否的状态。然后通过等道具
const { clicked, post, keyid, title } = this.state;
const newProp = { post, keyid, title };
<AllPost {...(clicked? newProps: {})} />