Question

var SearchForm = React.createClass({
  handleSearch: function() {
    alert('sd');
    var query = ReactDOM.findDOMNode(this.refs.query).value;

    alert(query);
    var self = this;
    alert('Dom');
    $.ajax({
      url: '/api/events/search',
      data: { query: query },
      success: function(data) {
        self.props.handleSearch(data);
      },
      error: function(xhr, status, error) {
        alert('Search error: ', status, xhr, error);
      }
    });
  },
  render: function() {
    return(
      <input onChange={this.handleSearch}
             type="text"
             className="form-control"
             placeholder="Type search phrase here..."
             ref="query" />
    )
  }
});

search_form.js.jsx的内容但是，如果我运行应用程序，ReactDOM.findDOMNode（）不起作用。因此，警报（查询）不会上升。

谁回答我？

Answer 1

您没有使用州或道具的任何理由（在这种情况下，您可以提升州）。一种可能的解决方案是将查询值添加为状态的一部分，并在每个更改事件上更改它。您可以找到代码示例here

export class UserManagementComponent implements OnInit {

  // You dont need this now
  // @ViewChild(ToastComponent) toast: ToastComponent;

  constructor(private readonly utilityService: UtilityService) {}

  someSaveMethod() {
    this.utilityService.showToast();
  }
}

Answer 2

我想它应该是this.refs而不是this.ref

var query = ReactDOM.findDOMNode(this.refs.query).value;

你也可以尝试直接获取价值：

var query = this.refs.query.value;

我如何使用ReactDOM.findDOMNode（）对rails on

2 个答案: