如何获得 onClick to Work WIth Child Component

Question

我无法将函数传递给子组件。我不明白为什么它永远不起作用。

我想将 approvePost() 作为 onClick 函数传递给我的子组件。

class AdminView extends Component {
constructor(props){
super(props);
this.approvePost = this.approvePost.bind(this);
}



approvePost(id) {   
fetch('http://10.6.254.22:5000/posts/approve/0/' + id, { 
    method: 'PUT',
    headers: {'Content-Type':'application/json'},
  })
  .then(function(response) {
    return response.json()
  }).then(function(body) {
    console.log(body);
  })

}



render() {
    // this.approvePost();
    const profileBox =  this.props.user.map(user => (
        <ProfileBoxTemplate firstName={user.firstName} lastName={user.lastName} vh5rec={user.vh5rec} vh5given={user.vh5given} admin={admin}/>
    ));
    const adminPosts = this.props.posts.map((post, index) =>
        <AdminPostBodyTemplate key={index} postId={post.id}  title={post.title} postBody={post.postBody} value={post.id}
             giphyUrl = {post.giphyUrl} userWhoPosted={post.userIdName} commentBody={post.commentBody} userIdName={post.userIdName}  onClick={this.approvePost}/>
         )
    const tac = {
        textAlign: 'center'
      }
    return (
        <div>
        <h1 style={tac}>Admin</h1>
         {profileBox} 
         {adminPosts}
        </div>
    )
}

我希望单击按钮后运行 approvePost() 函数。这是我将其传递给的子组件。

     export default function AdminPostBodyTemplate(props) {
      const { onChange, onSubmit, onClick} = props
         const classes = useStyles();
        //  render() {
             return (
              <div className={classes.root}>
                <Grid  xl={8} lg={8} xs={12} >
                <Card className={classes.card}>
                <CardContent>
                <Paper className={classes.root}>
                <Typography variant="h5" component="h2" style={fr}>
                      {props.userWhoPosted} Gave A VH5 To Julio {props.postId}
                  </Typography>
                    <Typography variant="h5" component="h3">
                      {props.title}
                    </Typography>
                    <Typography component="p">
                      {props.postBody}
                    </Typography>
                    <img src={props.giphyUrl} style={giphyRes}/>
                </Paper>
                </CardContent>
                <CardActions>
                      <button onClick={onClick} value={props.id}>Approve Post</button>
                      <button onSubmit={onSubmit}>Decline Post</button>
                </CardActions>
              </Card>
              </Grid>
            </div>
             )
        //  }
     }

现在按钮根本没有触发。我希望将通过 adminPostBodyTemplate 映射的 post.id 作为参数传递给我的 approvePost 并更新数据库。

Answer 1

回调值不是按钮值，而是一个回调事件。因此，您需要使用 const id = e.target.value

提取值

变化：

approvePost(id) {   
fetch('http://10.6.254.22:5000/posts/approve/0/' + id, { 
    method: 'PUT',
    headers: {'Content-Type':'application/json'},
  })
  .then(function(response) {
    return response.json()
  }).then(function(body) {
    console.log(body);
  })

}

至：

approvePost(e) { 
const id = e.target.value;
fetch('http://10.6.254.22:5000/posts/approve/0/' + id, { 
    method: 'PUT',
    headers: {'Content-Type':'application/json'},
  })
  .then(function(response) {
    return response.json()
  }).then(function(body) {
    console.log(body);
  })

}

简化的工作代码段

class AdminView extends React.Component {
    approvePost=(e)=>{   
        console.log('approvePost' , e.target.value)
    }
    declinePost=(e)=>{   
        console.log('declinePost' , e.target.value)
    }
    render() {
        return (
            <div>
                <AdminPostBodyTemplate postId='1' declinePost={this.declinePost} approvePost={this.approvePost}/>
            </div>
        )
    }
}

const AdminPostBodyTemplate = ({ approvePost , declinePost , postId }) => {
    return(
        <div>
            <button value={postId} onClick={approvePost} >Approve Post</button>
            <button value={postId} onClick={declinePost} >Decline Post</button>
        </div>
    )
}

ReactDOM.render(
    <AdminView />,
    document.getElementById("react")
);

<div id='react'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如何获得 onClick to Work WIth Child Component

How to get onClick to Work WIth Child Component

fetch

reactjs