Reactjs 向cloneElement添加一个引用，然后设置cloneElement的焦点

我以前没有使用过克隆元素，但现在我正在尝试创建一个按钮，当单击该按钮时，会打开一个适当类型的输入框，关键是，它会聚焦于输入框。我所做的似乎基本上可以工作，只是它没有聚焦（我得到一个控制台错误，this.refs.content.focus不是一个函数）。我试过阅读文档和其他问题，但没有进一步的进展。谢谢你的帮助

  getInitialState() {
    return {
      isEditing: false,
      .....
    };
  },

  _onEdit() {
    if (this.state.isEditing) return;
    this.setState({
      isEditing: true,
      editedValue: this.props.value,
    }, () => {
      console.dir(this.refs);
      this.refs.content.focus();
    });
  },

  .....

  render() {
    .....
    // button clicked
    if (this.state.isEditing) {

      return React.cloneElement(
        this.props.children[0], {
          onBlur: this.onBlur,
          value: this.state.editedValue,
          onChange: this.onChange,
          ref: "content",
        }
      );

    } else {

      const child = this.props.children[1];

      // Editable but in read mode - display clickable button
      return pug`
        button.btn-block.btn-editable(
          onClick=this._onEdit,
          type='button',
        )= React.cloneElement(child, {}, this.state.editedValue || (child.props.children || ""))
      `;
    }
  },