Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler.

input태그의 value를 this.state으로 지정할때가 있습니다. 하지만 수정도 안되고, 아래와 같은 에러가 뜰때가 있죠.

 

이는 value만 지정해주고 defaultValue나 onChange를 지정해주지 않았기 때문에 발생한다 쓰여있네요.

 

 

 

#defaultValue 사용법

<input defaultValue = {this.state.data}/>

defaultValue은 위와 같이 해주면 됩니다. 하지만 화면에 대한 변화가 없으면 state은 변해도 그 값은 그대로 입니다.

 

가령 react-slick의 Slide에 this.state을 데이터로 사용할때 발생합니다. 

import React, { Component } from "react";
import Slider from "react-slick";

class test extends Component {

	this.state = {
      a: 1,
      b: 2,
      c: 3
    }

delete = () => {
	.....//delete process
    this.setState({
    	b:2,
        c:3
    })

}
    render() {
      	<div>
        <Slide {...settings} > //settings은 Slide option입니다
          <div><input defaultValue={this.state.a}/></div>
          <div><input defaultValue={this.state.b}/></div>
          <div><input defaultValue={this.state.c}/></div>
        </Slide>
        <br/>
        <input type="button" onClick={this.delete}/>
        </div>
    }

} 

 

위 코드에서 this.state.a의 데이터가 있는 화면에서 버튼을 누르면(this.delete실행), state는 {b:2, c:3}로 변하지만, 화면에서 값은 1이 유지 됩니다.

 

적용이 제 추측으로는 defaultValue인거 같네요. state값이 defalutValue에 있으니... 그래서 저는 onChange를 씁니다.

 

 

 

#onChange사용법

 

import React, { Component } from "react";
import Slider from "react-slick";

class test extends Component {

	this.state = {
      a: 1,
      b: 2,
      c: 3
    }

delete = (event, type) => {
	let tar = event.target, val = tar.value
	
  if(type === "a") {
    this.setState({
		...this.state,
        a: val    
    })
   } else if (type === "b") {
     this.setState({
          ...this.state,
          v: val    
      })
   }
    ...... // c생략
} 
    render() {
      	<div>
        <Slide {...settings} > //settings은 Slide option입니다
           <div><input onChange = {(event) => {this.change(this.event,"a")}} value={this.state.a}/></div>
         	<div><input onChange =  {(event )=> {this.change(this.event,"b")}} value={this.state.a}/></div>
           <div><input onChange =  {(event )=> {this.change(this.event,"c")}} value={this.state.a}/></div>
        </Slide>
        <br/>
        <input type="button" onClick={this.delete}/>
        </div>
    }

} 

 

네 뭐 위와 같이 하면 됩니다^^. 위에서 onChange = {(event) => {this.change(this.event, "a")}} 형태가 있는데 이는 type및 event.target값을 넣어주기 위함이니 이해가 안되도 상관 없습니다.

 

요점:

@ input의 value를 this.state으로 지정시 defaultValue 나 onChange중 한개를 꼭 사용해야 value값을 수정해줄수 있다.

@  defaultValue는 뭔가 state반영? 이  잘안되는거 같으니, onChange를 선호하자!

 

끝.

 

 

 

코드 보기가 어려우시면 이 링크를 참조해주세요:

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/warning-failed-prop-type-you-provided-a-value-prop-to-a-form-field-without-an-onchange-701ebbabd640