Saya mencoba mengontrol posisi gulir dari suatu textarea menggunakan status komponen Bereaksi, tetapi tidak bergerak ketika saya memanggil setState().

Berikut adalah contoh di mana mengklik tautan harus menggulir ke atas area teks, tetapi tidak bergerak. Menggulir dengan bilah gulir dapat mencatat posisi, dan bidang bergerak. Mengklik tautan menulis pesan ke konsol, tetapi posisi gulir tidak bergerak. Saya mendasarkan pendekatan ini pada komponen terkontrol yang dijelaskan dalam dokumentasi ReactJS.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {scrollTop: 0};
    this.handleScroll = this.handleScroll.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleScroll() {
    let scrollTop = this.refs.content.scrollTop;
    console.log(scrollTop);
    this.setState({scrollTop: scrollTop});
  }
  
  handleClick(e) {
    e.preventDefault();
    console.log('Clicked.');
    this.setState({scrollTop: 0});
  }
  
  render() {
    let text = 'a\n\nb\n\nc\n\nd\n\ne\n\nf\n\ng';
    return <p><textarea
        ref="content"
        value={text}
        rows="10"
        cols="30"
        scrollTop={this.state.scrollTop}
        onScroll={this.handleScroll}/>
      <a href="#" onClick={this.handleClick}>
        Scroll to top
      </a></p>;
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);
.as-console-wrapper { max-height: 10% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Saya dapat mengontrol posisi gulir dengan menggunakan referensi dan menyetel scrollTop, tetapi saya ingin mengontrolnya melalui status komponen atau properti komponen. (Akhirnya, saya ingin menyinkronkan pengguliran dua area teks.) Saya juga mencoba menggunakan react-scroll-sync library, tetapi tidak bekerja dengan baik dengan sel tabel.

Berikut adalah contoh yang mengontrol posisi menggunakan ref dan scrollTop-nya:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleScroll() {
    let scrollTop = this.refs.content.scrollTop;
    console.log(scrollTop);
  }
  
  handleClick(e) {
    e.preventDefault();
    console.log('Clicked.');
    this.refs.content.scrollTop = 0;
  }
  
  render() {
    let text = 'a\n\nb\n\nc\n\nd\n\ne\n\nf\n\ng';
    return <p><textarea
        ref="content"
        value={text}
        rows="10"
        cols="30"
        onScroll={this.handleScroll}/>
      <a href="#" onClick={this.handleClick}>
        Scroll to top
      </a></p>;
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);
.as-console-wrapper { max-height: 10% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
0
Don Kirkby 26 Maret 2019, 06:40

1 menjawab

Jawaban Terbaik

Tommy May menjelaskan dalam komentar bahwa scrollTop bukan atribut HTML, jadi saya tidak dapat menautkannya langsung ke status atau properti komponen. Namun, saya menemukan bahwa componentDidUpdate() metode dapat digunakan untuk menangani perubahan status atau properti.

Berikut adalah contoh terbaru yang menggunakan componentDidUpdate():

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {scrollTop: 0};
    this.content = React.createRef();
    this.handleScroll = this.handleScroll.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleScroll() {
    let scrollTop = this.content.current.scrollTop;
    console.log(scrollTop);
    this.setState({scrollTop: scrollTop});
  }
  
  handleClick(e) {
    e.preventDefault();
    console.log('Clicked.');
    this.setState({scrollTop: 0});
  }
  
  componentDidUpdate() {
    this.content.current.scrollTop = this.state.scrollTop;
  }
  
  render() {
    let text = 'a\n\nb\n\nc\n\nd\n\ne\n\nf\n\ng';
    return <p><textarea
        ref={this.content}
        value={text}
        rows="10"
        cols="30"
        onScroll={this.handleScroll}/>
      <a href="#" onClick={this.handleClick}>
        Scroll to top
      </a></p>;
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);
.as-console-wrapper { max-height: 10% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Ini tidak terlalu berguna dalam contoh ini, tetapi berguna saat Anda ingin menggunakan properti alih-alih status lokal, seperti dalam jawaban ini< /a> Saya memposting untuk tujuan awal saya dari pengguliran yang disinkronkan.

1
Don Kirkby 27 Maret 2019, 04:47