Question

我创建了一个使用React的表单并维护用于存储表单数据的状态。表单仅包含文本字段和单选按钮。最后有一个'Proceed'按钮，其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 name="Proceed" type="button" onClick={this.handleClick} >Proceed</button>

如何从URL隐藏更新的状态

1 个答案: