添加ref到cloneElement然后设置cloneElement的焦点

Question

我之前没有使用克隆过的元素，但现在我正在尝试创建一个按钮，当点击它时会打开一个合适类型的输入框，而且关键的是，它集中在输入框上。我有什么似乎基本上工作，除了它没有集中（我得到一个控制台错误，_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 || ""))
      `;
    }
  },