Question

我在按下按钮时尝试生成随机用户信息，并显示按钮上方的信息。在ProfilePanel.js中，我创建了一个头像和用户常量，用于显示信息。在index.js中，头像常量适用于此，因为它不需要使用Button。但是，对于用户常数，它不起作用。在下面的代码中，我提取api数据来显示用户名，但它没有显示任何内容，我不确定哪里出错，在Button.js或index.js中出错了。以及如何解决它。有人可以帮帮我吗？感谢。

<Button title="name" >
<p key={contact.name} user={contact.name}></p>
</Button>

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Panel from "./ProfilePanel";
import axios from 'axios';
import './index.css';
import Button from './Button';

const url = 'https://randomuser.me/api/';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      contacts: []
    }
  }

  componentDidMount() {
    this.fetchdata();
  }

  fetchdata() {
    axios.get(url)
      .then(res => {
        console.log(res);
        this.setState({ contacts: res.data.results});
      });
  }

  render(){
    const {contacts} = this.state;
    return (
      <div className="panel">
          {contacts.map(contact => (
          <div class="panel">
            <Panel
              key={contact.picture} avatar={contact.picture.medium}
            />
            <li class="flex-container">
              <Button title="name" >
                <p key={contact.name} user={contact.name}></p>
              </Button>
              <Button title="location" onClick={this.fetchdata}> 
              </Button>
              <Button key={contact.email} title="email">
              </Button>
              <Button key={contact.phone} title="phone">
              </Button>
              <Button key={contact.login.password} title="password">
              </Button>
            </li>
          </div>
            ))}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

ProfilePanel.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import './index.css';
import Button from './Button';

const style={
  borderRadius: 150,
  margin: 15,
}

class Panel extends Component {

  render() {
    const { avatar,  user } = this.props;
    return (
      <div className="Panel">
        <div class="panels">
          <div className="avatar">
            <img src={avatar} class="imageStyle" alt="" width={"200%"} height={"auto"}/>
          </div>
        </div>
        <div class="center">
          <h2 className="user">{user}</h2>
        </div>

      </div>
    );
  }
}

export default Panel;

Button.js

import './index.css';
import React, { Component } from 'react';

class Button extends Component {

  constructor(props) {
    super(props);
    this.state = {
      open:false,
    };
  }

  render() {
    const { title } = this.props;
    const {open} = this.state;
    return (
      <button className={` ${open ? 'open' : ''}`} 
      class='button' onClick={(e) => this.handleClick(e)}>
        <div className="panel-heading">
          <h2 class='buttoncenter'>{title}</h2>
        </div>
      </button>
    );
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({
      open: this.state.open
    })
  }
  }

  export default Button;

Answer 1

您未在手柄点击中更改状态。您需要将open设置为true;

handleClick(e) {
    e.preventDefault();
    this.setState({
     open: true
   })
}

Answer 2

您需要在index.js中传递您的用户信息。我认为你错过了将用户道具传递给面板组件，因此它只显示了头像。在没有传递用户道具的情况下，您正试图在面板组件中进行解构。

string a = Console.ReadLine();
 int age = -1;
 if(int.TryParse(a,out age))
 {
    Console.WriteLine("What is your age?" + age);
    if (age <= 0)
    {
        Console.WriteLine("Wrong input");
        System.exit(0);
    }
    else if ((age >= 1) && (age <= 6))
    {
        Console.WriteLine("you are in Preschool");
    }
    else if ((age >= 7) && (age <= 13))
    {
        Console.WriteLine("you are in Elementary School");
    }
    else if ((age >= 14) && (age <= 18))
    {
        Console.WriteLine("You are in High School");
    }
    else if ((age >= 19) && (age <= 26))
    {
        Console.WriteLine("You are probably in College");
    }
    else
    {
        Console.WriteLine("you probaby have graduated already");
    }
}

ReactJS如何在onClick上显示获取响应

2 个答案: