在表单内反应JS颜色选择器

Question

我整天都在为此苦苦挣扎。真的很新，所以提前道歉。

我正在尝试使用 react-jsonschema-form 从具有 react-color 的 json 创建表单。

这就是我现在拥有的：

import React, {Component} from "react";
import {ChromePicker} from 'react-color';
import Form from "react-jsonschema-form";
const ColorPicker = (props) => {
    return (
        <ChromePicker
            color={props.value || false}
            value={props.value}
            onChange={(event) => {
                props.onChange(event.color)
            }}
        />
    )
}
const schema = {
  "type": "object",
  "properties": {
    "base": {
      "type": "object",
      "title": "Global settings",
      "properties": {
        "line-height": {
          "title": "Body line height",
          "type": "number"
        },
        "background-color": {
          "title": "Body background color",
          "type": "string"
        },
        "font-color": {
          "title": "Body background color",
          "type": "string"
        }
      }
    }
  }
}
const uiSchema = {
    base:{
        "background-color":{
            'ui:widget':ColorPicker
        },
        "font-color":{
            'ui:widget':ColorPicker
        }
    }
}
export default class GeneratorForm extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(data) {
            console.log(data)
    }
    render() {
        return (
            <Form schema={schema}
                  uiSchema={uiSchema}
                  //onBlur={this.handleSubmit}
                  onChange={this.handleChange}
                  //onSubmit={this.handleSubmit}
                  onError={log("errors")}/>
        );
    }
}

带有两个颜色选择器的简单形式。颜色选择器工作得很好，除了在句柄更改中，该字段的表单数据为空。就像没有分配值一样。我已经搜索了类似的主题，与datepicker3类似的东西，这给了我一个让它变得简单的想法(有一些疯狂的代码，自定义类组件等(。

所以问题是，如何将值从颜色选择器传递到表单值？提前谢谢。

Answer 1

你应该看看 Docs for react-color。您未正确处理onChange事件。它应该是：

const ColorPicker = (props) => {
    return (
        <ChromePicker
            color={props.value || false}
            value={props.value}
            onChange={ color => {
                props.onChange(color)
            }}
        />
    )
}

event.color不存在。onChange处理程序将获得两个参数，color 和 event 。