React JS에서 색상 컨트롤을 사용할 때의 경고

Question

Rebel JS와 Babel and Webpack을 사용하고 있습니다.

The specified value "" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

내 코드는 다음과 같다 :

import React from 'react'; 

class EditDetails extends React.Component { 


    constructor(props) { 
     super(props); 
     this.state = { 
      bg: "#ffffff" 
     }; 
    } 

    handleChange(event) { 
     const target = event.target; 
     const value = target.type === 'checkbox' ? target.checked : target.value; 
     const id = target.id; 

      this.setState({ 
       [id]: value 
      }); 
    } 




    render() { 
     return (
      <div> 
       <form> 
        <div>Background Colour:<input id="bg" type="color" onChange={this.handleChange.bind(this)} value="#dddddd" /></div> 
        </form> 
      </div> 
    ) 
    } 
} 

export default EditDetails; 

만약 모든 것이 내 다른 스크립트 색상 모듈을 사용하는 경우에도 것들, 그러나, 내 스크립트 중 하나가 나에게 다음과 같은 오류를주고 함께 잘 일했다 나는 실제로 동일한 오류 메시지를 두 번 내 입력 태그에서 value="#dddddd"을 제거합니다. I는 value을 제거하면

switch (props.type) { 
    case 'submit': 
    case 'reset': 
    break; 
    case 'color': 
    case 'date': 
    case 'datetime': 
    case 'datetime-local': 
    case 'month': 
    case 'time': 
    case 'week': 
    // This fixes the no-show issue on iOS Safari and Android Chrome: 
    // https://github.com/facebook/react/issues/7233 
    node.value = ''; 
    node.value = node.defaultValue; 
    break; 
    default: 
    node.value = node.value; 
    break; 
} 

구체적으로는 제 node.value 라인 참조 (또는 처음 두 node.value 라인 : 상기 조사 결과

는 에러 참조 ReactDOMInput.js의 다음 섹션 내 포인트 속성).

색상 코드가 올바른 16 진수 형식 일 때이 오류가 생성되는 이유는 무엇입니까?

참고 : 정확한 색상은 실제로 색상 컨트롤에서 올바르게 설정되어 나타납니다.

Answer 1

클래스 생성자에서 함수를 바인딩하십시오.

import React, { Component } from 'react'; 
 

 
export default class EditDetails extends Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { bg: '#ffffff' }; 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(event) { 
 
    const { target } = event; 
 
    const { id, value } = target; 
 

 
    this.setState(
 
     { [id]: value } 
 
    ); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <form> 
 
     <div> 
 
      <input id='bg' type='color' onChange={this.handleChange} value={this.state.bg} /> 
 
     </div> 
 
     </form> 
 
    ) 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>