Question

我写了一个和平的代码，如果工作有望从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

Answer 1

div没有onSubmit事件form但是，修复它并且你应该没问题

试图从GitHub API获取用户数据不确定是什么错误

1 个答案: