0

我已经创建了一个使用 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 实时数据库时，身高、性别和体重字段都是空的。如有不妥请指出。

4

1 回答 1

1

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

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

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

<button name="Proceed" type="button" onClick={this.handleClick} >Proceed</button>
于 2018-04-30T06:30:45.827 回答