reactjs - 尝试从 GitHub API 获取用户数据不确定出了什么问题

标签 reactjs

我编写了一段代码,如果有效的话,预计会根据用户输入从 GitHub API 获取个人资料图片和用户名。控制台也没有显示任何错误。任何人都可以帮我纠正这个问题吗?提前致谢。

这是我迄今为止尝试过的

var Main = React.createClass({
    getInitialState:function(){
        return({
            user:[]
        });
    },
    addUser: function(loginToAdd) {
        this.setState({user: this.state.logins.concat(loginToAdd)});
    },
    render: function() {
        var abc = this.state.user.map(function(user){
            return(
                <Display user={user} key={user}/>
            );
        });
        return (
            <div>
                <Form addUser={this.addUser}/>
                {abc}
                <hr />
            </div>
        )
    }
});
var Form = React.createClass({
    handleSubmit: function(e) {
        e.preventDefault();
        var loginInput = React.findDOMNode(this.refs.login);
        this.props.addUser(loginInput.value);
        loginInput.value = '';
    },
    render:function(){
        return (
            <div onSubmit={this.handleSubmit}>
                <input type="text" placeholder="github login" ref="login"/>
                <button>Add</button>
            </div>
        )
    }
});
var Display = React.createClass({
    getInitialState:function(){
        return{};
    },
    componentDidMount:function(){
        var component = this;
        $.get("https://api.github.com/users/"+this.props.user,function(data){
            component.setState(data);
        });
    },
    render: function() {
        return (
            <div>
                <img src={this.state.avatar_url} width="80"/>
                <h1>{this.state.name}</h1>
            </div>
        )
    }
});
ReactDOM.render(<Main />, document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
    <div id="app"></div>
</div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</body>
</html>

JSBin Link

最佳答案

div 没有 onSubmit 事件 form 但是,解决这个问题就可以了

关于reactjs - 尝试从 GitHub API 获取用户数据不确定出了什么问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36819619/

相关文章:

javascript - 如何在 React 中处理多个上下文?

javascript - React JS 哪个按钮被点击了多少次?

reactjs - 在表单控件中 react 引导只读输入

javascript - 表中嵌套 Json - React-Virtualized

reactjs - 如何在具有功能组件的 React 应用程序中使用 Google(通过 Firebase)登录用户?

javascript - 如何在nextjs中添加字体ttf文件

jquery - 对于这个复杂的例子,如何 "think in React"?

react-redux - 在 React 组件中设置条件 onClick 行为

javascript - react Prop 类型 : custom validators not firing

javascript - react : "react-scripts start" cannot find module webpack