React - зміна неконтрольованого вводу

У мене є простий компонент реагування з формою, яка, як я вважаю, має один керований вхід:

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: '' };

вхід буде контролюватися з самого початку, виправляючи проблему. Щоб отримати додаткові приклади, див. Реагувані контрольовані компоненти .

Незалежно від цієї помилки, ви повинні мати лише один експорт за замовчуванням. Ваш код вище два.

Коли ви вперше візуалізуєте свій компонент, 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/isissue/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(" ")

Зазвичай це відбувається лише тоді, коли ви не контролюєте значення поданої, коли програма запускалася, і після того, як якась подія або якась функція була запущена або стан змінився, ви зараз намагаєтесь керувати значенням у полі введення.

Цей перехід відсутності контролю над входом, а потім контролю над ним - це те, що спричиняє проблему в першу чергу.

Найкращий спосіб уникнути цього - оголосивши якесь значення для введення в конструктор компонента. Так що елемент введення має значення з початку програми.

Для динамічного налаштування властивостей стану для входів форми та контролю їх контролю ви можете зробити щось подібне:

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 є нульовим.

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

Це також працює зі змінними useState.