如何让父组件通道具儿童被点击按钮仅在

问题描述 投票:3回答:1

我想从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>
)
          )
    }    
}
reactjs
1个回答
0
投票

一个更好的办法来解决你的问题是保持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: {})} />
© www.soinside.com 2019 - 2024. All rights reserved.