首页 文章

在React JS中使用颜色控件时出现警告

提问于
浏览 次
3

我正在使用React JS与Babel和Webpack . 我的其他脚本甚至使用颜色模块的脚本都可以正常工作，但是，我的一个脚本给了我以下错误：

指定值“”不符合所需格式 . 格式为“#rrggbb”，其中rr，gg，bb是两位十六进制数字 .

我的代码如下：

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" ，它实际上会给出相同的错误消息两次 .

经过进一步调查，错误参考指向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;
}

具体来说，它指的是第一个 node.value 行（或者当我删除 value 属性时的前两行 node.value 行） .

为什么在我使用正确的十六进制格式的颜色代码时会生成此错误？

注意：确实在颜色控件中正确设置了正确的颜色 .

reactjs webpack

1 回答

  • 0

    尝试以这种方式在类构造函数中绑定您的函数 .

    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>
    回复于

相关问题