Question

我有一个FORM，只需要在提交时以状态存储值即可。我在这样做时遇到了问题，

我只能在FormControl中获得最后输入的值，即：

formControls：资格：“ a”
我收到此错误： 警告：组件正在将文本类型的受控输入更改为不受控制。 输入元素不应从受控制切换为不受控制（反之亦然）。在组件的生命周期中决定使用受控还是不受控制的输入元素。

我了解了上述问题，因此我在构造函数中声明了我的状态，因此即使在触发onChange函数之前，我的输入元素也具有该值。 但这似乎也无法解决我的问题。

下面是我的代码：

import React, { Component } from 'react';
import  './user.css';

class User extends Component {
    constructor(props){
        super(props);
            this.state = {
                formControls: {
                 name: "",
                 age: "",
                 occupation:"",
                 hometown: "",
                 qualification: ""
                } 
             }   
        }


    detailsHandler = (e) => {
       const name = e.target.name;
       const value = e.target.value;
       console.log(name, value)
       this.setState({
        formControls: {
          [name]: value
        }
    });
    }
    submitFormHandler    = (e) => {
        e.preventDefault();
        console.log(this.state)

    }
  render() {
    return (
      <div>
         <div className="main-container">
            <div className="form-header">
                <p className="">Fill details here</p>
            </div>
            <div className="form-container">
            <form onSubmit={this.submitFormHandler}>
            <div className="form-row">
                <div className="form-label"><label>Name: </label></div>
                <input type="text" placeholder="name" name="name" value={this.state.formControls.name} onChange={this.detailsHandler}/>
            </div>
            <div className="form-row">
            <div className="form-label"><label>Age: </label></div>

                <input type="text" placeholder="age"  name="age" value={this.state.formControls.age}  onChange={this.detailsHandler}/>
            </div>
            <div className="form-row">
            <div className="form-label"><label>Occupation: </label></div>

                <input type="text" placeholder="Occupation"  name="occupation" value={this.state.formControls.occupation}  onChange={this.detailsHandler}/>
            </div>
            <div className="form-row">
            <div className="form-label"><label>Hometown: </label></div>
                <input type="text" placeholder="Hometown"  name= "hometown" value={this.state.formControls.hometown}  onChange={this.detailsHandler}/>
            </div>
            <div className="form-row">
            <div className="form-label"><label>Qualification: </label></div>
                <input type="text" placeholder="Qualification" name="qualification" value={this.state.formControls.qualification}  onChange={this.detailsHandler}/>
            </div> 
            <div>

               <input type="submit" value="SUBMIT" />
            </div>
            </form>
            </div>
        </div>
      </div>
    );
  }
}

export default User;

有人可以帮我弄清楚我在做什么错吗？

Answer 1

我认为问题出在您如何设置状态。据我所知，状态更新是浅合并（https://reactjs.org/docs/state-and-lifecycle.html#state-updates-are-merged），这意味着在更新状态时，正在擦除其他表单控件的值。

this.setState({
    formControls: {
      [name]: value  // the other values will be lost except for [name]
    }
});

您将要合并来自当前状态的表单控件值，或在状态更新调用中手动包括所有值。

const oldFormControls = this.state.formControls;
const newFormControls = Object.assign(oldFormControls,  {
    [name]: value
});

this.setState({
   formControls: newFormControls
});

类似的东西。

编辑：当表单值丢失（空）时，React将输入置于不受控制的模式。

React中的表单问题：控制到不受控制

1 个答案: