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

Question

我想仅当在 AddPost 中单击按钮时将 Prop 从 AddPost 组件传递到 AllPosts 组件。

另外，每次单击按钮时，如何继续从 AddPost 在 AllPosts 中的对象“newArray”中添加新帖子的数据(帖子、标题、keyid)，并将此新数据保存在 allposts 数组中，然后显示每个帖子通过对其应用 map 功能。

我面临着如何从 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>
)
          )
    }    
}

Answer 1

解决问题的更好方法是保持 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>
        ))
   )   
}

但是，如果您只想在单击后传递 Prop ，则需要维护一个表示已单击或未单击的状态。然后传递像

这样的 Prop

const { clicked, post, keyid, title } = this.state;
const newProp = { post, keyid, title };

<AllPost {...(clicked? newProps: {})} />