javascript - 如何从 URL 隐藏更新状态

Question

我使用 React 创建了一个表单并维护存储表单数据的状态。该表单仅包含文本字段和单选按钮。最后有一个“继续”按钮，其 onClick 函数如下所示:

handleClick(event){
    console.log(this.state);
    var userID = 1;
    firebase.database().ref('registrations/'+userID).set(this.state);
}

还有另一个函数可以处理输入更改，如下所示:

handleInputChange(event){
    const target=event.target;
    const name=target.name;
    var value;
    if((target.type==="radio"&&target.checked)||target.type!=="radio") value=target.value;
    this.setState({
        [name]:value
    });

}

我希望控制台在填写表单并单击“继续”按钮后记录更新的状态。但是，当我填写表单并单击按钮时，状态会在消失之前短暂显示在控制台上(控制台返回到最初的状态)，并且我会在 URL 中看到表单数据。如何停止在 URL 中显示数据并在控制台中记录状态数据？

我是 React 的相对初学者。因此，如果我不知道一些非常基本的东西，请耐心等待。

提前致谢。

编辑:这里是 render()，请注意我还更新了点击处理程序。

render() {
    return(
        <div>
        <div className="State">
            <div className="Head">
            State
            </div>
            <div className="StateField">
            <input 
                name="state"
                type="text"
                onChange={this.handleInputChange} />
            </div>
            <hr />
        </div>
        <div className="Age">
            <div className="Head">
            Age
            </div>
            <div className="AgeField">
            <input
                name="age"
                type="number"
                onChange={this.handleInputChange} />
            </div>
            <hr />
        </div>
        <div className="Ethnicity">
            <div className="Head">
            Ethnicity
            </div>
            <div className="EthnicityField">
            <input  name="ethnicity"    type="radio"    value="Hispanic or Latino"          onClick={this.handleInputChange} defaultChecked /> Hispanic or Latino
            <input  name="ethnicity"    type="radio"    value="Non-Hispanic or Non-Latino"  onClick={this.handleInputChange} /> Non-Hispanic or Non-Latino
            </div>
            <hr />
        </div>
        <div className="Race">
            <div className="Head">
            Race
            </div>
            <div className="RaceField">
            <input name="race" type="radio" value="American Indian" onClick={this.handleInputChange} defaultChecked /> American Indian
            <input name="race" type="radio" value="Asian"           onClick={this.handleInputChange}/> Asian
            <input name="race" type="radio" value="Native Hawaiian or Other Pacific Islander" onClick={this.handleInputChange}/> Hawaiian or Other Pacific Islander
            <input name="race" type="radio" value="Black or African American" onClick={this.handleInputChange}/> Black or African American
            <input name="race" type="radio" value="White"           onClick={this.handleInputChange}/> White
            </div>
            <hr />
        </div>
        <div className="Sex">
            <div className="Head">
            Sex
            </div>
            <div className="SexField">
            <input name="sex" type="radio" value="Male"     onClick={this.handleInputChange} defaultChecked /> Male
            <input name="sex" type="radio" value="Female"   onClick={this.handleInputChange}/> Female
            </div>
            <hr />
        </div>  
        <div className="Height">
            <div className="Head">
            Height
            </div>
            <div className="HeightField">
            <input name="height" type="number" placeholder="In inches" onChange={this.handleInputChange}/>
            </div>
            <hr />
        </div>
        <div className="Weight">
            <div className="Head">
            Weight
            </div>
            <div className="WeightField">
            <input name="weight" type="number" placeholder="In pounds" onChange={this.handleInputChange}/>
            </div>
            <hr />
        </div>
        <div className="ProceedButton">
        <button name="Proceed" onClick={this.handleClick} >Proceed</button>
        </div>
        </div>
    );

现在我还意识到，当我将状态添加到 firebase 实时数据库时，高度、性别和体重字段为空。如有错误请指出。

Answer 1

按钮元素的默认类型是“提交”。如果您不采取任何措施来阻止它，单击按钮将提交一个表单，该表单是该按钮的祖先元素。

您描述的所有症状都与帖子中未显示的表单内的按钮一致。

尝试将 `type="button"添加到按钮定义中:

<button name="Proceed" type="button" onClick={this.handleClick} >Proceed</button>