反應：搜索結果不顯示？

所以我正在學習react.js，我正在開發一個使用用戶的GitHub API的快速搜索引擎。反應：搜索結果不顯示？

該項目的API邊工作正常（我已經通過手動輸入姓名測試進入該地區）

其搜索建立反應不工作。

（FYI：我使用Plunker其中有反應的支持）

script.jsx

var Card = React.createClass({ 
    getInitialState: function(){ 
    return{}; 
    }, 
    componentDidMount: function(){ 
    var component = this; 
    $.get("https://api.github.com/users/" + this.props.login, function(data){ 
     component.setState(data); 
    }); 
    }, 
    render: function(){ 
    return(
     <div> 
     <img src={this.state.avatar_url} width="100"/> 
     <h3>{this.state.name}</h3> 
     <hr/> 
     </div> 
    ); 
    } 
}); 

var Form = React.createClass({ 
    handleSubmit: function(e){ 
    e.preventDefault(); 
    var loginInput = React.findDOMNode(this.refs.login); 
    this.props.addCard(loginInput.value); 
    loginInput.value = ''; 
    }, 
    render: function(){ 
    return(
     <form onSubmit={this.handleSubmit}> 
     <input placeholder="Enter Github Name" ref="login"/> 
     <button>Search</button> 
     </form> 
    ); 
    } 
}); 

var Main = React.createClass({ 
    getInitialState: function(){ 
    return {logins: []}; 
    }, 
    addCard: function(loginToAdd){ 
    this.setState({logins: this.state.logins.concat(loginToAdd)}); 
    }, 
    render: function() { 
    var cards = this.state.logins.map(function(login){ 
     return (<Card login={login} />); 
    }); 
    return(
     <div> 
     <Form addCard={this.addCard} /> 
     {cards} 
     </div> 
    ) 
    } 
}); 

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

來源

2016-07-26 ClarkPamler93

指向plunkr的鏈接將很有用 – jzm

您期待什麼結果，您會得到什麼結果？ –

@jzm heres the plunker link sry -https：//plnkr.co/edit/T7Xm92j20wRzatyx6Uyh？p = info – ClarkPamler93

的問題是（如果你檢查控制檯），你有一個重複的腳本在你不需要的<head>標記中。而且，你在做React.findDOMNode代替ReactDOM.findDOMNode

您的JSX文件的第25行：

var loginInput = ReactDOM.findDOMNode(this.refs.login);

這就是說，你並不需要做ReactDOM.findDOMNode。您可以使用this.refs.login

來源

2016-07-26 08:11:30 jzm

是這樣做，非常感謝 – ClarkPamler93

反應：搜索結果不顯示？

回答

相關問題