javascript

Question

Ne elde etmek çalışıyorum kullanıcı devam ederse kaydırmak için tek bir satır olarak başlar ama 4 satıra kadar büyüyecek ve bu noktadan başında textarea (a max durdurmak) yazmak. Ben büyür ve sonra max çarptığında durdurulur, ancak metni silerseniz bunu istedikleri gibi o küçültmek değil, kısmi bir çözüm tür çalışma var.

Şimdiye dek sahip olduğum şey budur.

export class foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     textareaHeight: 38 
    }; 
    } 

    handleKeyUp(evt) { 
    // Max: 75px Min: 38px 
    let newHeight = Math.max(Math.min(evt.target.scrollHeight + 2, 75), 38); 
    if (newHeight !== this.state.textareaHeight) { 
     this.setState({ 
     textareaHeight: newHeight 
     }); 
    } 
    } 

    render() { 
    let textareaStyle = { height: this.state.textareaHeight }; 
    return (
     <div> 
     <textarea onKeyUp={this.handleKeyUp.bind(this)} style={textareaStyle}/> 
     </div> 
    ); 
    } 
} 

Açıkçası sorun height daha büyük bir şey olarak ayarlandığında scrollHeight geri aşağı çekmez olduğunu. Bunu nasıl çözebileceğime dair herhangi bir öneri, bu yüzden metin silinirse geri çekilir mi?

Answer 1

o

LIVE DEMO

import React, { Component } from 'react'; 
import autosize from 'autosize'; 

class App extends Component { 
    componentDidMount(){ 
     this.textarea.focus(); 
     autosize(this.textarea); 
    } 
    render(){ 
     const style = { 
       maxHeight:'75px', 
       minHeight:'38px', 
        resize:'none', 
        padding:'9px', 
        boxSizing:'border-box', 
        fontSize:'15px'}; 
     return (
      <div>Textarea autosize <br/><br/> 
      <textarea 
      style={style} 
      ref={c=>this.textarea=c} 
      placeholder="type some text" 
      rows={1} defaultValue=""/> 
      </div> 
     ); 
    } 
} 

için autosize kullanabilir veya isterseniz modülleri https://github.com/andreypopp/react-textarea-autosize