Question

所以我正在学习react.js，我正在使用用户的GitHub API开发一个快速搜索引擎。

该项目的API方面工作正常（我通过手动输入名称进行测试）

它的搜索内置反应无效。

（仅供参考：我正在使用具有反应支持的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"));

Answer 1

问题是（如果您检查控制台），您在<head>中有一个您不需要的重复脚本标记。而且，你正在做React.findDOMNode而不是ReactDOM.findDOMNode

JSX文件的第25行：

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

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

React：搜索结果未显示？

1 个答案: