Warning when using color management in React JS
I am using React JS with Babel and Webpack. Everything works fine with my other scripts, even the ones using the color module, however one of my scripts gives me the following error:
The specified value "does not match the required format. The format is" #rrggbb "where rr, gg, bb are two-digit hexadecimal numbers.
My code looks like this:
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;
If I remove value="#dddddd"
from my input tag, it actually throws the same error message twice.
Upon further investigation, the error link points me to the following section in 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;
}
In particular, it is a reference to the first line node.value
(or the first two lines node.value
when removing an attribute value
).
Why does this error occur when I have a color code in the correct hexadecimal format?
Note. The correct color is indeed displayed correctly in the color management.
source to share
Try to bind your function in the class constructor this way.
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>
source to share