React JSでカラーコントロールを使用する際の警告

Question

React JSとBabelと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"を私の入力タグから削除します。実際には同じエラーメッセージを2度与えます。誤差基準がReactDOMInput.jsの次のセクションに私を指し、さらに調査すると

は、：

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

Iはvalueを削除すると具体的には、最初node.valueライン（又は最初の二つnode.value行を参照され属性）。

カラーコードを正しい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>