Question

我试图在点击时显示用户详细信息，点击其他用户详细信息我要隐藏或删除页面上的现有用户详细信息，下面是我的一段代码

TODO.js

import React from "react";
import {fetchjson} from '../../helpers/helpers';
import Userdetail from "../../components/userdetails/userdetail"; 
export default class Todo extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        showComponent: false,
        userData: []
    };
}
handleClick = () => {

    fetchjson('users/' + this.props.tododdate.userid).then((data) => {
        console.log(data)
        this.setState({
            showComponent: true,
            userData: data
        });

    });

}
render() {
    const thistodo = this.props.tododdate;
    return ( <div className = "row" >
        <div className = "col-md-6" >
        <h3 onClick = {this.handleClick} > USER ID: {thistodo.userid } </h3> 
      <ul className = "list-unstyled" > {
            thistodo.todo.map(todo =>
                <li > < input type = "checkbox"
                checked = {
                    todo.completed
                }
                /> {todo.title}</li >
            )
        } </ul> </div> 
        <div className = "col-md-6" > {
            this.state.showComponent ?
            <Userdetail userprops = {
                this.state.userData
            }/> :
            null
        } </div> </div>
    )
  }
 }

UserDetail.js

import React from "react";
export default class Userdetail extends React.Component{
 render() {
   const thisuserdata=this.props.userprops;
   return (
   <div>
    <label>name : </label>
      {thisuserdata.name}<br/>
      <label>username : </label>
     {thisuserdata.username}<br/>
     <label>name : </label>
   {thisuserdata.name}<br/>
   <label>phone : </label>
    {thisuserdata.phone}<br/> 
   <label>website : </label>
   {thisuserdata.website}<br/>
    </div>
   )}
 }

当我点击用户ID：1 /用户ID：2 ...我能够显示用户详细信息，但我想隐藏用户ID：1点击用户ID的详细信息：2详细信息。

Answer 1

您可以使用此语法

{showComponent && <div></div>}

基于showComponent值，您可以显示hide div，也可以通过 setState

更新值

显示/隐藏自定义组件

1 个答案: