Question

我100％确信已经回答了这个问题（here，here和here？），但我只是不知道如何应用已经存在的答案被给予。如果您要将其标记为重复，请附上有关如何将现有答案应用于我的特定问题的说明。谢谢！

致力于这个tutorial，并度过了愉快的时光。我启动并运行了初始代码，可以选择颜色，可以选择大小，然后单击Draw！并获得色彩鲜艳的圆圈。一如既往，警惕仅仅复制代码是不够的，我决定扩展我的选择，首先添加一个不透明度选项，然后考虑“嗯，从4-5种颜色中进行选择似乎很有限。一种颜色某种选择器将是很棒的补充。”

经过一番谷歌搜索和堆栈溢出后，我决定尝试react-color，它有很多颜色选择器可供选择。

经过大约两天的尝试，我不知道是如何使颜色选择器与原始教程中的表单进行交互，或者如何影响绘制的圆圈的颜色（默认为紫色，看不到）任何颜色的选择。）

我不知道如何在CodePen上运行具有多个组件的React应用程序，因此我无法给出一个很好的例子说明我现在正在运行的内容。这是相关的代码位。

原始颜色/尺寸形式（来自本教程的Controller.js）：

export default class Controller extends Component {
  constructor() {
    super();
    this.state = {
      color: "",
      width: "",
      opacity: "", // <- my addition
      toDraw: []
    };
    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  onSubmit(evt) {
    evt.preventDefault();
    const newShape = {
      color: this.state.color,
      width: this.state.width,
      opacity: this.state.opacity // <- my addition
    };
    this.setState({ toDraw: [...this.state.toDraw, newShape] });
  }

  onChange(evt) {
    this.setState({
      [evt.target.name]: evt.target.value
    });
  }

  render() {
    return (
      <div className="controller">
        <form onSubmit={this.onSubmit}>
          <select name="color" onChange={this.onChange}>
            <option disabled selected="selected" value="">
              {" "}
              Color{" "}
            </option>
            <option value="red"> Red </option>
            <option value="orange"> Orange </option>
            <option value="yellow"> Yellow </option>
            <option value="green"> Green </option>
            <option value="blue"> Blue </option>
            <option value="purple"> Purple </option>
          </select>
          <label> How big: </label>
          <input name="width" onChange={this.onChange} />
          <button type="submit"> Draw! </button>
        </form>
        {this.state.toDraw.length ? <Viz shapes={this.state.toDraw} /> : null}
      </div>
    );
  }
}

（在我的代码中，根据颜色选择，还有几行用于选择不透明度。这行得通，所以我暂时将其省略。）

颜色选择器的初始代码如下所示，在其中选择新颜色会更改按钮本身的颜色：

import React from "react";
import reactCSS from "reactcss";
import { SketchPicker } from "react-color";

class SketchExample extends Reacht.Component {
  state = {
    displayColorPicker: false,
    color: {
      r: "241",
      g: "112",
      b: "19",
      a: "1"
    }
  };

  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  };

  handleClose = () => {
    this.setState({ displayColorPicker: false });
  };

  handleChange = color => {
    this.setState({ color: color.rgb });
  };

  render() {
    const styles = reactCSS({
      default: {
        color: {
          width: "36px",
          height: "14px",
          borderRadius: "2px",
          background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${
            this.state.color.b
          }, ${this.state.color.a})`
        },
        swatch: {
          padding: "5px",
          background: "#fff",
          borderRadius: "1px",
          boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
          display: "inline-block",
          cursor: "pointer"
        },
        popover: {
          position: "absolute",
          zIndex: "2"
        },
        cover: {
          position: "fixed",
          top: "0px",
          right: "0px",
          bottom: "0px",
          left: "0px"
        }
      }
    });

    return (
      <div>
        <div style={styles.swatch} onClick={this.handleClick}>
          <div style={styles.color} />
        </div>
        {this.state.displayColorPicker ? (
          <div style={styles.popover}>
            <div style={styles.cover} onClick={this.handleClose} />
            <SketchPicker
              color={this.state.color}
              onChange={this.handleChange}
            />
          </div>
        ) : null}
      </div>
    );
  }
}

export default SketchExample;

现在，我可以将kiddy脚本编写到我的代码中，将SketchExample导入到我的Controller.js代码中，并获得一个漂亮的变色按钮以显示在表单中间...但是如何进行更改按钮的颜色（令人愉悦的反馈），以及实际上修改为圆圈选择的颜色？我毫不怀疑它是一行（甚至只是一行）...但是我对位置和原因感到困惑。

当我尝试修改SketchExample.js中的任何onChange代码时，当我对表单进行任何其他更改时，按钮/颜色选择器将停止响应或重置为其初始颜色，因此显然已经存在一些交互作用，好还是坏...我是否需要修改THAT组件，或者它是形式（除了注释原始的手工编码选项之外）本身还是需要更新的Controller.js才能处理来自以下组件的输出？ SketchExample.js？

作为参考，我做了做了Facebook React Tic-Tac-Toe教程...但是很久以前，凝视THAT代码及其所有精湛的道具/状态/提升逻辑是'敲响任何特别有用的铃声。

谢谢！

将react-color组件插入react + d3教程

0 个答案: