调用 parent 设置状态时网站重新加载

Question

我创建了一个 child 组件，并希望在单击 child 中的按钮时通过 child 中文本框的参数更改 parent 状态。我将函数传递给 child 组件。单击按钮后，状态发生变化，html 内容发生变化，但之后网站重新加载，状态变回初始值。

这是主要的class

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;

这是childclass

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;

请帮帮我！！

Answer 1

该按钮位于表单内，因此浏览器的默认行为是在单击时重新加载浏览器。

您可以通过对事件调用 preventDefault 方法来防止这种情况。

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

调用 parent 设置状态时网站重新加载

Website reload when call parent set state

callback

parent-child

reactjs