Question

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

请帮助我！

Answer 1

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

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

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

呼叫父级设置状态时网站重新加载

1 个答案: