reactjs - 仅在单击按钮时，如何使父级组件将prop传递给子级

我只想在AddPost中单击按钮时将道具从AddPost组件传递到AllPosts组件。

加上每次单击按钮时如何继续从AddPost的AllPosts对象“ newArray”中的AddPost添加新帖子的数据（post，title，keyid），并将此新数据保存在allposts数组中，然后通过应用地图显示每个帖子功能就可以了。

我面临有关如何从newObject的AddPost中获取新数据并不断在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: {})} />