使用 Jsx 放入 Textarea 按钮（反应）

Question

从初级到专业的关于 Jsx 和反应的关键小问题：

我有文本区域，我想把按钮放在里面

    renderButton() {
    const { mod } = this.state
    return (
      <button className={classNames({
        [styles.button]: mod == 'default',
        [styles.fullScreenButton]: mod == 'fullscreen'
      })} onClick={this.fullScreen} >
      {this.renderIcon()}
      </button>
    )
  }

  render() {
    const { text, rows } = this.props
    const { mod } = this.state
    return (
      <div>
        <textarea rows={rows} value='text'
          className={classNames({
            [styles.textArea]: mod == 'default',
            [styles.fullScreen]: mod == 'fullscreen'
          })}>
        </textarea>
        {this.renderButton()}
      </div>
    )
  }
}

我该怎么做？

就

<textarea> <button> </button> </textarea>

不工作使用 position: absolute 也许可以，但是还有其他方法吗？

Answer 1

如您所见，将 HTML 按钮作为 <textarea> 的子按钮是行不通的。这不是 React 或 JSX 的限制，而是 <textarea> 元素的限制。如果您希望按钮在视觉上放置在 <textarea> 内，您需要使用 CSS 来重新定位它。像这样：

div {
  position: relative;
}

textarea {
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
}

button {
  position: absolute;
  bottom: 15px;
  right: 10px;
}

<div>
  <textarea>
  </textarea>
  <button>Submit</button>
</div>

使用 Jsx 放入 Textarea 按钮（反应）

Put inside Textarea button with Jsx (react)

jsx

react-jsx