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")}/>
        );
    }
}

带两个采色器的简单形式。并且colorpicker工作得很好，除了handleChange之外，该字段的formData为空。这就像没有赋值。我搜索了类似的主题，类似于datepicker 3的东西，这给了我一个简单的想法（有一些疯狂的代码，自定义类组件等）。

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

Answer 1

你应该看看the 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。

在表单内部反映JS颜色选择器

1 个答案: