reactjs - 为什么 this.refs 未定义？

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

当用作函数时，该方法未绑定(bind)到 this:

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

或

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

或将其绑定(bind)在构造函数中:

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

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