Проблема формы в реакции: контролируется неконтролируемой - PullRequest
Новая
       20

Проблема формы в реакции: контролируется неконтролируемой

0 голосов
/ 16 февраля 2019

У меня есть ФОРМА, которая просто должна хранить значения в состоянии при отправке.При этом я сталкиваюсь с проблемой:

  1. Я получаю только значение последнего ввода в моем formcontrol, то есть:

    formControls: qualification: "a"

  2. Я получаю эту ошибку: Предупреждение: компонент изменяет управляемый ввод текста типа на неуправляемый. Входные элементы не должны переключаться с контролируемого на неуправляемый (или наоборот).Решите, использовать контролируемый или неконтролируемый элемент ввода для времени жизни компонента.

Я понял вышеупомянутую проблему , поэтому я объявил свое состояние внутри конструктора, чтобы мой элемент вводаимеет значение еще до запуска функции 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;

Может ли кто-нибудь помочь мнепойми что я делаю не так?

1 Ответ

0 голосов
/ 16 февраля 2019

Я думаю, проблема в том, как вы устанавливаете состояние.Насколько я знаю, обновления состояний сливаются незначительно (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
});

Что-то в этом роде.

Редактировать: когда значения формы теряются (null), затем React переводит ввод в неуправляемый режим.

...