为什么 this.refs 未定义？答案

【问题标题】：Why is this.refs undefined?为什么 this.refs 未定义？
【发布时间】：2017-10-10 02:46:07
【问题描述】：

为什么this.refs在下面的代码中没有定义？

class NewItem extends React.Component {
  handleClick() {
    console.log(this.refs) //prints out undefined
    const name = this.refs.name.value;
    const description = this.refs.description.value;
    $.ajax({
      url: 'api/v1/items',
      type: 'POST',
      data: {
        item: {
          name: name,
          description: description
        }
      },
      success: (item) => {
        this.props.handleSubmit(item);
      }
    });
  }

  render() {
    return (
      <div>
        <input ref='name' placeholder='Enter the name of the item' />
        <input ref='description' placeholder='Enter the description of the item' />
        <button onClick={this.handleClick}>Submit</button>
      </div>
    )
  }
}

【问题讨论】：

标签： reactjs

【解决方案1】：

作为函数使用时，方法不绑定this：

<button onClick={this.handleClick.bind(this)}>Submit</button>

或

<button onClick={event => this.handleClick(event)}>Submit</button>

或者绑定到constructor:

constructor(props, context) {
   super(props, context);

   this.handleClick = this.handleClick.bind(this);
}

【讨论】：

【解决方案2】：

您需要将this 绑定到您的handleClick() 函数，如下所示：

<button onClick={this.handleClick.bind(this)}>Submit</button>

或者通过构造函数，像这样：

constructor(props) {
  ...
  this.handleClick = this.handleClick.bind(this);
}

尽管您应该避免在refs 中使用字符串文字。这种方法是deprecated。

旧版 API：字符串引用

如果你以前使用过 React，你可能会熟悉 ref 属性是字符串的旧 API，例如 "textInput"，DOM 节点以this.refs.textInput 访问。我们建议不要这样做，因为字符串引用有some issues，被认为是旧版本，并且可能会在未来的某个版本中被删除。如果您目前正在使用this.refs.textInput 访问参考文献，我们推荐使用回调模式。

改为：

constructor(props) {
  this.nameInputRef;
  this.descriptionInputRef;
}

...

  <input ref={(el) => {this.nameInputRef = el;} placeholder='Enter the name of the item' />
  <input ref={(el) => {this.descriptionInputRef = el;} placeholder='Enter the description of the item' />

【讨论】：

【解决方案3】：

你已经绑定了函数。应该是这样的

class NewItem extends React.Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

  handleClick() {
    console.log(this.refs) //prints out undefined
    const name = this.refs.name.value;
    const description = this.refs.description.value;
    $.ajax({
      url: 'api/v1/items',
      type: 'POST',
      data: {
        item: {
          name: name,
          description: description
        }
      },
      success: (item) => {
        this.props.handleSubmit(item);
      }
    });
  }

  render() {
    return (
      <div>
        <input ref='name' placeholder='Enter the name of the item' />
        <input ref='description' placeholder='Enter the description of the item' />
        <button onClick={this.handleClick}>Submit</button>
      </div>
    )
  }
}

尝试使用 ES6 特性，箭头函数可以避免这个绑定问题。像这样。

  handleClick =()=> {
    console.log(this.refs) //prints out undefined
    const name = this.refs.name.value;
    const description = this.refs.description.value;
    $.ajax({
      url: 'api/v1/items',
      type: 'POST',
      data: {
        item: {
          name: name,
          description: description
        }
      },
      success: (item) => {
        this.props.handleSubmit(item);
      }
    });
  }

【讨论】：