Question

我通过simillar topic阅读了同样的错误，但是这并没有解决我的问题。我有一个简单的应用程序组件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class SearchBox extends Component {

    render() {
        return (
            <form onSubmit = {this.handleClick.bind(this)}>
                <input
                    ref="search"
                    type="text" 
                    placeholder="username..."/>

                <input
                    type="submit"
                    value="Search" />
            </form>
        );
    }

    handleClick(e) {
        e.preventDefault();
        let username = this.refs.search.findDOMNode().value;
        this.props.fetchUser(username);
        this.refs.search.findDOMNode().value = '';
    }

    fetchUser(username) {
        let url = `https://api.github.com/users/${username}`;

        this.fetchApi(url);
      }

    fetchApi(url) {
      fetch(url)
        .then((res) => res.json())
        .then((data) => {

          this.setState({
            username: data.login,
            image: data.avatar_url,
            name: data.name,
            location: data.location,
            followers: data.followers,
            following: data.following
          })
        })
    }
}

export default SearchBox;

渲染组件后，出现以下错误：

TypeError: this.refs.search.findDOMNode is not a function
  20 | 
  21 | handleClick(e) {
  22 |  e.preventDefault();
> 23 |     let username = this.refs.search.findDOMNode().value;
  24 |     
  25 |     this.props.fetchUser(username);
  26 |      this.refs.search.findDOMNode().value = '';

我尝试使用findDOMNode（）和getDOMNode（）方法，但没有运气。它们都会导致弹出相同的错误。有什么想法吗？

Answer 1

自React版本0.13起，

.getDOMNode已弃用，不再需要findDOMNode

根据此 Github issue ，Dan Abramov谈到可能通过使用findDOMNode删除ref callbacks

同样使用最新版本，可以使用以下内容

class SearchBox extends Component {

    render() {
        return (
            <form onSubmit = {this.handleClick.bind(this)}>
                <input
                    ref={(ref) => this.search = ref}
                    type="text" 
                    placeholder="username..."/>

                <input
                    type="submit"
                    value="Search" />
            </form>
        );
    }

    handleClick(e) {
        e.preventDefault();
        let username = this.search.value;
        this.props.fetchUser(username);
        this.refs.search.findDOMNode().value = '';
    }

另请阅读此 answer on StackOverflow ，了解有关使用引用回调而非字符串引用的更多信息

Answer 2

对于我可以从您的代码中理解的内容，您要做的就是访问该值以在获取请求中发送它，然后设置一个空字符串。但是，您执行此操作的方式不是反应方式，您应该使用状态来控制组件以保持更新的值。

class SearchBox extends Component {
  state = {
    username: '',
  };

  render() {
    const { username } = this.state;
    return (
        <form onSubmit = {this.handleClick.bind(this)}>
            <input
                value={username}
                type="text" 
                onChange={this.setUsername}
                placeholder="username..."/>

            <input
                type="submit"
                value="Search" />
        </form>
    );
  }

  setUsername = (event) => this.setState({ username: event.target.value });

  handleClick(e) {
    e.preventDefault();
    this.props.fetchUser(this.state.username);
    this.setState({ username: '' });
  }
}

键入时，状态将更新，然后单击按钮时，您可以从州获取用户名。重置状态将自动将输入值设置为空字符串。

findDOMNode（）和getDOMNode（）不是函数

2 个答案: