Question

使用reactjs颜色托盘抽屉。虽然我无法在jsfiddle中使用它。有兴趣让它作为一个独立的应用程序工作。

var Colr = colr;
//var React = require('react');
//var ColorPicker = require('react-colorpicker');

var App = React.createClass({

  getInitialState: function () {
    return {
      color: '#000000',
    };
  },

  setColor: function () {
    var color = Colr.fromRgb(
      Math.random() * 255, 
      Math.random() * 255, 
      Math.random() * 255
    );

    // replace current color and origin color
    this.setState({
      color: color.toHex()
    });
  },

  handleChange: function (color) {
    this.setState({
      color: color.toHex()
    });
  },

  render: function () {
    /* jshint ignore: start */
    return (
      <div>
        <button onClick={this.setColor}>Load Random Color</button>
        <div>Active: {this.state.color}</div>

        <div id='container'>
          <ColorPicker
            color={this.state.color}
            onChange={this.handleChange}
          />
        </div>
      </div>
    );
    /* jshint ignore: end */
  },

});

document.addEventListener('DOMContentLoaded', function () {
  React.renderComponent(new App(), 
  document.getElementById('ColorPaint'));
});

Answer 1

您正在使用react v0.14.*，其中不推荐使用renderComponent，您应该使用ReactDOM.render而不是

ReactDOM.render(
  <App />,
  document.getElementById('ColorPaint')
);

Example

<强>更新

我已经完成了你的画布示例的重构，现在它看起来像这样

var CanvasDraw = React.createClass({
  canvas: function () {
    var context = this.refs.canvas.getContext('2d');

    context.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };

    context.clearTo = function(fillColor, width, height) {
      this.fillStyle = fillColor;
      this.fillRect(0, 0, width, height);
    };

    context.clearTo(
      this.props.canvasColor,
      this.props.width, 
      this.props.height
    );
  },

  componentDidMount: function () {
    this.canvas();
  },

  getInitialState: function () {
    return {
      isDrawing: false,
      mouseColor: null
    }
  },

  getDefaultProps: function () {
    return {
      width: 100, 
      height: 100,
      canvasColor: '#dddddd',
      mouseColor: '#ff0000',
      radius: 5
    }
  },

  handleMouseUp: function () {
    this.setState({ isDrawing: false })
  },

  handleMouseDown: function () {
    this.setState({ isDrawing: true })
  },

  handleMouseMove: function (e) {
    if (!this.state.isDrawing) {
      return;
    }

    var element = e.currentTarget,
        context = element.getContext('2d'),
        left    = element.offsetLeft,
        top     = element.offsetTop;

    context.fillCircle(
      e.pageX - left,
      e.pageY - top, 
      this.props.radius,
      this.state.mouseColor || this.props.mouseColor
    );
  },

  handleClear: function () {
    this.refs.canvas
      .getContext('2d')
      .clearTo(
        this.props.canvasColor, 
        this.props.width, 
        this.props.height
      );
  },

  handleChangeColor: function (color) {
    this.setState({
      mouseColor: color
    })
  },

  render: function() {
    return <div className="canvas-draw">

      <button 
        className="canvas-draw__button" 
        onClick={this.handleClear}
      >
        Clear
      </button>

      <button 
        className="canvas-draw__button" 
        onClick={this.handleChangeColor.bind(this, '#ff0000')}
      >
        Red
      </button>

      <button 
        className="canvas-draw__button" 
        onClick={this.handleChangeColor.bind(this, '#0000ff')}
      >
        Blue
      </button>

      <div className="canvas-draw__board">
        <canvas
          className="canvas"
          ref="canvas" 
          width={ this.props.width } 
          height={ this.props.height }
          onMouseUp={ this.handleMouseUp }
          onMouseDown={ this.handleMouseDown }
          onMouseMove={ this.handleMouseMove }
        />
        </div>
    </div>
  }
});

ReactDOM.render(
  <CanvasDraw 
    width="200" 
    height="200" 
    canvasColor="#000000" 
    mouseColor="#ffffff" 
  />, 
  document.getElementById('CanvasDraw')
);

Example

ReactJs彩色托盘抽屉

1 个答案: