问题描述
我知道如何使用功能组件来实现。但是,关于类组件,我要澄清的问题很少。
我在这里上课,
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;
所以我想知道的是
-
如果我只想更新状态对象内的 page ,我是否必须保留 rowsPerPage 并将它们都更新为
this.setState({page:<updatedValue>,rowsPerPage:<preservedValue>);
反之亦然 -
handleChangePage 和 handleChangeRowsPerPage 中包含什么代码,如果我们可以更新状态对象内的独立属性。
-
当我们有多个这样的状态并且想要独立更新每个状态时,最佳实践是什么?
解决方法
您可以像下面一样独立更新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>