Реактивная автопрокрутка не работает, если она реализована с помощью кнопки и таблицы. - PullRequest
Новая
       19

Реактивная автопрокрутка не работает, если она реализована с помощью кнопки и таблицы.

0 голосов
/ 29 апреля 2019

Я попытался внедрить автоматическую прокрутку в React, но он не работает, мои требования таковы: Когда я нажимаю на кнопку, результат будет отображаться в таблице под кнопкой, которая должна автоматически прокручиваться ... т.е. Мне не нужно прокручивать его вниз.

Я попытался установить ссылку на ваш контейнер и прокрутить его до конца в componentDidMount, но он не сработал .....

Ниже приведен фрагмент кода: 

 component Table extends React.Component{

   constructor(props) {
    super(props);  
    this.mesRef = React.createRef();
  }
  componentDidMount() {
        this.scrollToBottom();
    }

    scrollToBottom = () => {
        this.mesRef.current.scrollTop = this.mesRef.current.scrollHeight;
    };

      submitValues(pie) {
    this.setState({ formsubmit1: true},
    () => {
                    this.scrollToBottom();
                }
    );
     failureResult = this.state.failureResultValue
      .filter(data => data.name == pie.name)
      .reduce((acc, item) => acc.concat(item.Details) , []);
    console.log("Result is:", failureResult);
  }
  render(){
  return(

  <Button
                  onClick={this.submitValues}
                  style={{
                    background:
                      "linear-gradient(to left bottom,rgb(31, 130, 167), rgb(161,215,232))",
                    fontSize: "small",
                    marginLeft: "30%"
                  }}
                >
                  View Result
                </Button>
   <br /> <br /> <br /> <br /> <br /> <br /> <br /><br /> <br /> <br /><br />
  <div className={this.state.formsubmit1 ? "showDisplay" : "hide"} ref={this.mesRef}>
                <Table striped bordered hover>
                  <thead>
                    <tr>
                      <th>
                        <div class="row">
                          <div class="col-md-2" >
                            <input type="checkbox" name="name1" />
                          </div>
                        </div>
                      </th>
                      <th>ID</th>
                      <th>Value</th>
                      <th>Source</th>
                      <th>Number</th>
                    </tr>
                  </thead>
                   <tbody>
                          {result.map((item, i) => (
                            <tr>
                                <td id="col1" align="center">
                               <input type="checkbox" name="name1" />
                              </td>
                              <td id="col1" align="center">
                                <a
                                href="#"
                                onClick={this.handleClick.bind(
                                  this,item.ID
                                )}
                              >
                                {item.ID}
                              </a>
                              </td>
                              <td id="col2" align="center">
                                {item.Value}
                              </td>
                              <td id="col5" align="center">
                                {item.value}
                              </td>
                              <td id="col6" align="center">
                                {item.number}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                </Table>
                </div>
                )
                }
                }
...