Реакция - изменение неконтролируемого входа

У меня есть простой компонент реагирования с формой, которая, как мне кажется, имеет один контролируемый вход:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

Когда я запускаю свое приложение, я получаю следующее предупреждение:

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

Я считаю, что мой вклад контролируется, поскольку он имеет ценность. Мне интересно, что я делаю не так?

Я использую React 15.1.0

Я считаю, что мой вклад контролируется, поскольку он имеет ценность.

Чтобы вход был управляемым, его значение должно соответствовать значению переменной состояния.

Это условие изначально не выполняется в вашем примере, потому что this.state.nameизначально не установлено. Поэтому вход изначально не контролируется. Как только onChangeобработчик запускается в первый раз, this.state.nameустанавливается. В этот момент вышеуказанное условие удовлетворяется, и вход считается контролируемым. Этот переход от неконтролируемого к контролируемому приводит к ошибке, замеченной выше.

Инициализируя this.state.nameв конструкторе:

например

this.state = { name: '' };

вход будет контролироваться с самого начала, устраняя проблему. См. React Controlled Components для большего количества примеров.

Независимо от этой ошибки, у вас должен быть только один экспорт по умолчанию. Ваш код выше имеет два.

Когда вы впервые визуализируете свой компонент, this.state.nameон не установлен, поэтому он оценивается как undefinedили null, и в итоге вы переходите value={undefined}или value={null}к своему input.

Когда ReactDOM проверяет, контролируется ли поле, он проверяет, еслиvalue != null (обратите внимание, что это !=не так !==), и, поскольку undefined == nullв JavaScript, он решает, что оно неконтролируемое.

Таким образом, когда onFieldChange()вызывается, this.state.nameустанавливается строковое значение, ваш ввод переходит от неконтролируемого к контролю.

Если вы сделаете это this.state = {name: ''}в своем конструкторе, потому что '' != nullваш ввод будет иметь значение все время, и это сообщение исчезнет.

Другим подходом может быть установка значения по умолчанию внутри вашего ввода, например:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Я знаю, что другие уже ответили на это. Но очень важный фактор, который может помочь другим людям, испытывающим подобные проблемы:

Вы должны onChangeдобавить обработчик в поле ввода (например, textField, флажок, радио и т. Д.). Всегда обрабатывайте активность через onChangeобработчик.

Пример:

<input ... onChange={ this.myChangeHandler} ... />

Когда вы работаете с флажком, вам может потребоваться обработать его checkedсостояние с помощью !!.

Пример:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

Ссылка: https://github.com/facebook/react/issues/6779#issuecomment-326314716

Простое решение для решения этой проблемы - установить пустое значение по умолчанию:

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />

Один потенциальный недостаток при установке значения поля "" (пустая строка) в конструкторе - это если поле является необязательным и оставлено неотредактированным. Если вы не сделаете некоторый массаж перед отправкой формы, поле будет сохранено в вашем хранилище данных в виде пустой строки вместо NULL.

Эта альтернатива позволит избежать пустых строк:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

При использовании onChange={this.onFieldChange('name').bind(this)}в качестве входных данных вы должны объявить пустую строку вашего состояния в качестве значения поля свойства.

неверный путь:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

правильный путь:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

В моем случае мне не хватало чего-то действительно тривиального.

<input value={state.myObject.inputValue} />

Мое состояние было следующим, когда я получал предупреждение:

state = {
   myObject: undefined
}

Чередуя мое состояние со ссылкой на ввод моей стоимости , моя проблема была решена:

state = {
   myObject: {
      inputValue: ''
   }
}

Если реквизиты вашего компонента были переданы как состояние, установите значение по умолчанию для ваших входных тегов.

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>

Установите значение для свойства name в исходном состоянии.

this.state={ name:''};

Обновление для этого. Для использования React Hooksconst [name, setName] = useState(" ")

Обычно это происходит только тогда, когда вы не контролируете значение поля, когда приложение запускается, и после того, как какое-то событие или какая-либо функция сработали или состояние изменилось, вы теперь пытаетесь контролировать значение в поле ввода.

Этот переход отсутствия контроля над входом и последующего контроля над ним и является причиной возникновения проблемы.

Лучший способ избежать этого - объявить некоторое значение для ввода в конструкторе компонента. Так что элемент input имеет значение с самого начала приложения.

Для динамической установки свойств состояния для входов формы и их контроля вы можете сделать что-то вроде этого:

const inputs = [
    { name: 'email', type: 'email', placeholder: "Enter your email"},
    { name: 'password', type: 'password', placeholder: "Enter your password"},
    { name: 'passwordConfirm', type: 'password', placeholder: "Confirm your password"},
]

class Form extends Component {
  constructor(props){
    super(props)
    this.state = {} // Notice no explicit state is set in the constructor
  }

  handleChange = (e) => {
    const { name, value } = e.target;

    this.setState({
      [name]: value
    }
  }

  handleSubmit = (e) => {
    // do something
  }

  render() {
     <form onSubmit={(e) => handleSubmit(e)}>
       { inputs.length ?
         inputs.map(input => {
           const { name, placeholder, type } = input;
           const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string

           return <input key={name}  type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
       }) :
         null
       }
       <button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
     </form>    
  }
}

Просто создайте запасной вариант для '', если this.state.name имеет значение null.

<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Это также работает с переменными useState.