Question

从初级到专业的关于Jsx的Okey小问题并做出反应：

我有textarea，我想把内部按钮

    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：绝对可能是，但还有其他方法吗？

Answer 1

正如您所发现的那样，将HTML按钮设置为<textarea>的子项将无效。这不是React或JSX的限制，而是<textarea＆gt;的限制。元件。如果您希望按钮被放置在<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按钮（反应）

1 个答案: