时间戳

首页 > 解决方案 > 调用父设置状态时网站重新加载

reactjs - 调用父设置状态时网站重新加载

问题描述

我创建了一个子组件，并希望在单击子项中的按钮时通过子项中的文本框的参数来更改父项状态。我将函数传递给子组件。点击按钮后，状态改变，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;

请帮我 ！！

标签： reactjscallbackparent-child

解决方案

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

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

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

推荐阅读