Question

为什么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>
    )
  }
}

Answer 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);
}

Answer 2

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

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

或通过构造函数，如下所示：

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

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

旧版API：字符串引用

如果您之前使用过React，那么您可能会   熟悉较旧的API，其中ref属性是一个字符串，如   "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' />

Answer 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);
      }
    });
  }

为什么this.refs未定义？

3 个答案:

旧版API：字符串引用