0

Всем привет, у меня в комоненте, содержащем форму с инпутами выскакивает варнинг

введите сюда описание изображения

const EditPageModal = (props) => {

  const { 
    categories, 
    pageDetails, 
    handlerInputsValue,
    updateEditPage } = props;

  const validateForm = (obj) => {
    // ......
  } 

	let categoriesList = ERROR_TEXT;
  
	if(categories.length !== 0){
    categoriesList = categories.map((item, index)=>{

      	return(
          <option
            key={index}
            className={item.catClass}
            value={item._id}>{item.catName}</option>
      	)
    });
	}

	return(
		<div className="modal fade" id="modal-editpage" tabIndex="-1" role="dialog" 
	        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div className="modal-dialog modal-dialog-centered" role="document">
        <div className="modal-content">
          <div className="modal-header alert-success">
            <h5 
            	className="modal-title" 
            	id="exampleModalLongTitle">
            	Editor Page
          	</h5>
            <button 
            	type="button" className="close" 
            	data-dismiss="modal" aria-label="Close">
            		<span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div className="modal-body">

            <form className="form-signin" onSubmit={(e)=>e.preventDefault()}>

<div className="form-label-group">
	<input onChange={(ev) => handlerInputsValue(ev.target.value, ev.target.id)}
     value={pageDetails.name}
	type="text" id="name" className="form-control" 
		placeholder="enter Name Page"
         aria-describedby="editPage" />
		<label htmlFor="name">Name Page</label>
	</div>

						  <div className="form-label-group">
						    <input
                  value={pageDetails.link} 
                  onChange={(ev) => handlerInputsValue(ev.target.value, ev.target.id)}
						    	type="text" id="link" className="form-control" 
						    	placeholder="enter Link Page"
                  aria-describedby="editPage" />
						    <label htmlFor="link">Link Page</label>
						  </div>

						  <div className="form-label-group">
						    <input
                  value={pageDetails.screen} 
                  onChange={(ev) => handlerInputsValue(ev.target.value, ev.target.id)}
						    	type="text" id="screen" className="form-control" 
						    	placeholder="enter Link Preview Page"
                  aria-describedby="editPage" />
						    <label htmlFor="screen">Link Preview Page</label>
						  </div>

						  <div className="form-label-group">
						  	<select
                  value={pageDetails.ctgrId}
                  onChange={(ev) => handlerInputsValue(ev.target.value, ev.target.id)}
  					    	id="ctgrId" className="form-control"
                  aria-describedby="editPage" >
					         {categoriesList}
				      	</select>
						    <label htmlFor="type">Select Cathegorie</label>
						  </div>

              <div className="form-label-group">
                <input
                  value={pageDetails.orderNum}
                  onChange={(ev) => handlerInputsValue(ev.target.value, ev.target.id)}
                  type="number" id="orderNum" 
                  className="form-control" 
                  placeholder="order page"
                  aria-describedby="editPage" />
                <label htmlFor="orderNum">Order Page</label>
              </div>

						  <button 
                id="editPage"
                className="btn btn-info btn-block" type="button"
                onClick={(ev)=>validateForm(
                  {
                    _id: pageDetails._id,
                    name: pageDetails.name, 
                    link: pageDetails.link, 
                    ctgrId: pageDetails.ctgrId,
                    ctgrClass: pageDetails.ctgrClass,
                    ctgrColor: pageDetails.ctgrColor,
                    ctgrBGC: pageDetails.ctgrBGC,
                    userId: pageDetails.userId,
                    screen: pageDetails.screen,
                    orderNum: Number(pageDetails.orderNum)
                  }
                )}>
                Save Page Changes
              </button>
						</form>
          </div>
        </div>
      </div>
    </div>
	);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

В документации указано, что value должно использоваться c onChange(). Не пойму в чём ошибка

3 ответа 3

0

В значении, которое вы присваиваете компоненту. Вы неправильно его определяете и кидаете в input. Сколько уже можно. https://itnext.io/controlled-and-uncontrolled-component-design-pattern-in-react-21e8d40e46e

2
  • Да, спасибо, разобрался, ответ нашёлся тут stackoverflow.com/questions/50715760/…
    – komplekt17
    8 сен 2019 в 18:18
  • В моём случае можно сделать так в отношении value={nameProps == null ? '' : nameProps}
    – komplekt17
    8 сен 2019 в 18:39
0

Инпуты в React являются контролируемыми или неконтролируемыми в зависимости от наличия значения пропсы value на входе. То есть, передав пропсу value еще не будет означать, что компонент будет контролируемым. Дело в том, что передав начальное значение undefined - React всегда запускает input в неконтролируемом режиме (он считает, что значения нет).

После того, как Вы начнете изменять значение input, и значение изменится с undefined на какое-то конкретное значение в строковом эквиваленте - тогда React переключит input в контролируемый режим, и Вы получаете предупреждение в консоли браузера.

Для решения такой простой проблемы - есть простой ответ. Необходимо инициализировать значение input элемента - пустой строкой по-умолчанию. Пример с проверкой через тернарку:

value={pageDetails && !!pageDetails.orderNum ? pageDetails.orderNum : ''}

Ссылка на ответ SO: React-Mobx Warning: A component is changing an uncontrolled input

0

Добавь атрибут defaultValue на input

<input type=“text” onchage=“func” value=“value” defaultValue=“value” />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.