Добрый вечер. Подскажите почему так происходит.
Есть компонент-контроллер
class CasesController extends React.Component {
constructor(props) {
super(props);
}
sortCasesPriority(caseA, caseB) {
if (caseA.comeLater > caseB.comeLater) return 1;
if (caseB.comeLater > caseA.comeLater) return -1;
if (caseA.comeLater == caseB.comeLater) {
if (caseA.priority > caseB.priority) return -1;
if (caseB.priority > caseA.priority) return 1;
}
}
render() {
const {cases} = this.props;
return (
cases.sort(this.sortCasesPriority).map(singleCase => {
return (
<Case
key={singleCase.id}
singleCase={singleCase}
/>
)
}
))
}
}
в котором отрисовываются Case.
по умолчанию у всех Case comeLater = 0. В Case есть кнопка, которая изменяет comeLater на 1. соответственно (так задана функция сортировки) элемент перемещается в самый низ списка. Но окно браузера тоже идет за ним и прокручивается в самый низ страницы. С чем это связано и как можно это изменить?
P.S.
action и reducer для изменения comeLater
export function comeLaterCase(caseId){
return{
type: COME_LATER_CASE,
payload: caseId
}
}
case COME_LATER_CASE:
//изменяем только тот элемент, где совпал ID
let newLaterCases = state.cases.filter(singleCase => {
if (singleCase.id == action.payload)
singleCase.comeLater = ++singleCase.comeLater;
return singleCase;
});
return {...state, cases: newLaterCases};
компонент Case, в котором как раз есть кнопка на изменение comeLater.
class Case extends React.Component {
constructor(props) {
super(props);
const {singleCase} = this.props;
this.singleCase = singleCase;
this.handleComeLaterButton = this.handleComeLaterButton.bind(this);
}
handleComeLaterButton(){
const {comeLaterCase} = this.props.casesActions;
comeLaterCase(this.singleCase.id);
}
render() {
const {singleCase} = this.props;
return (
<div className="singleCase">
<div>
{singleCase.text}
</div>
<div>
<RaisedButton label="Игнорировать" onTouchTap={this.handleComeLaterButton}/>
</div>
</div>
)
}
}
И да, есть роуты
ReactDOM.render(
<Provider store={store}>
<HashRouter>
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<div className="App">
<ul className="menu-bar">
<li className="menu-item"><Link className="menu-item-link" to="/">Главная</Link></li>
<li className="menu-item"><Link className="menu-item-link" to="/cases">Кейсы</Link></li>
</ul>
<Route exact path="/" component={App} />
<Route path="/cases" component={CasesController} />
</div>
</MuiThemeProvider>
</HashRouter>
</Provider>,
document.getElementById("container")
);
