把textarea的按鈕，裏面有JSX（反應）從初中

Question

歐凱小問題的親約JSX和反應：

我有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> 

不工作 使用的位置是：絕對的，也許是的，但有什麼另一種方式來做到這一點？

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>