Как самостоятельно обновить несколько дочерних состояний в компонентах класса React?

Question

Я знаю, как это можно сделать с помощью функциональных компонентов. Но когда дело доходит до компонентов класса, у меня есть несколько вопросов, которые нужно прояснить.

У меня здесь класс,

class MyTable extends Component {
   constructor(props) {
      super(props);
       this.state = {
          page:0,
          rowsPerPage:10
       }
   }

   handleChangePage(event) {
      //Here I want to update only **page** keeping **rowsPerPage** intact
   }

   handleChangeRowsPerPage(event) {
      //Here I want to update only **rowsPerPage** keeping **page** intact
   }

   render() {
      return(
         <SomeComponent
           onChangePage={this.handleChangePage}
           onChangeRowsPerPage={this.handleChangeRowsPerPage}
         />
      )
   }
}
export default Mytable;

Итак, вот что я хочу знать,

1. Если я хочу обновить только страницу внутри объекта состояния, должен ли я сохранить rowsPerPage и обновить их какthis.setState({page:<updatedValue>, rowsPerPage:<preservedValue>);И наоборот

2. Какой код находится внутри handleChangePage и handleChangeRowsPerPage, если мы можем обновить независимые свойства внутри объекта состояния.

3. Что лучше всего, если у нас несколько таких состояний и мы хотим обновлять каждое независимо?

Answer 1

Вы можете обновить page а также rowsPerPageнезависимо, как я уже говорил. Тебе нужно просто позвонитьthis.setState и прохождение и возражение с key состояния, которое вы хотите обновить

class MyTable extends React.Component {
   constructor(props) {
      super(props);
       this.state = {
          page:0,
          rowsPerPage:10
       }
       
       this.handleChangePage = this.handleChangePage.bind(this);
       this.handleChangeRowsPerPage = this.handleChangeRowsPerPage.bind(this);
   }

   handleChangePage(event) {
      //Here I want to update only **page** keeping **rowsPerPage** intact
      this.setState({page: event.target.value});
   }

   handleChangeRowsPerPage(event) {
      //Here I want to update only **rowsPerPage** keeping **page** intact
      this.setState({rowsPerPage: event.target.value});
   }

   render() {
      return (
         <div>
            <div>
              Page <input type="text" value={this.state.page} onChange={this.handleChangePage} />
            </div>
            
            <div>
              rowsPerPage <input type="text" value={this.state.rowsPerPage} onChange={this.handleChangeRowsPerPage} /></div>
         </div>
      )
   }
}

ReactDOM.render(<MyTable />, document.getElementById('root'));

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