Перезагрузка сайта при вызове родительского состояния - PullRequest
Новая
       5

Перезагрузка сайта при вызове родительского состояния

0 голосов
/ 12 ноября 2018

Я создал дочерний компонент и хочу изменить родительское состояние с помощью параметра из текстового поля дочернего элемента, когда нажимаю кнопку дочернего элемента. Я передаю функцию дочернему компоненту. После нажатия кнопки изменилось состояние, изменился HTML-контент, но после этого веб-сайт перезагрузился, и состояние вернулось к исходному значению.

Это основной класс 

class Main extends React.Component {
    constructor() {
        super();
        this.state = {
             samples: 5
        };
    }
    setSamplesHandler(value) {    
        this.setState({samples: value})
    }
    render() {
        return (
            <div>
                <ControlBoard status={status} setSamplesHandler={this.setSamplesHandler.bind(this)}/>
            </div>
        );
    }
}
export default Main;

Это детский класс 

class ControlBoard extends React.Component {
    constructor(){
        super();
        this.state = {
            tempSamples: 0
        };
    }
    changeTextBox(){
        this.setState({tempSamples: event.target.value})
    }
    onClickSet() {
        this.props.setSamplesHandler(this.state.tempSamples);
    }
    render() {
        return(
            <div>
                <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder={this.props.status.samples} aria-label="set" onChange={this.changeTextBox.bind(this)}/>
                <button class="btn btn-outline-success my-2 my-sm-0" onClick={this.onClickSet.bind(this)}>Set</button>
                </form>
            </div>
        );
    }
}
export default ControlBoard;

Пожалуйста, помогите мне !!

1 Ответ

0 голосов
/ 12 ноября 2018

Кнопка находится внутри формы, поэтому поведение браузера по умолчанию заключается в перезагрузке браузера при нажатии.

Это можно предотвратить, вызвав метод preventDefault для события. 

onClickSet(event) {
  event.preventDefault();
  this.props.setSamplesHandler(this.state.tempSamples);
}
...