无法使用材质ui颜色选择器在输入字段中显示值

Question

我的目标是在输入字段中显示颜色值。我无法在文本字段中获取颜色值。有人能在这个查询中帮助我获得应该只接受六种颜色值的颜色值吗？

这是代码：

import React from "react";
import ColorPicker from "material-ui-color-picker";
export default class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
color: ""
};
}
handleColor = (e) => {
console.log("color", e);
this.setState({ color: e });
};
render() {
return (
<ColorPicker
name="color"
defaultValue={this.state.color}
onChange={this.handleColor}
/>
);
}
}

这是样品有人能帮我查询一下吗？

Answer 1

您没有将value道具设置为反映您在状态中保存的颜色。这是一个修正后的沙盒。

这个组件的行为很奇怪，因为当选择新的颜色时，它似乎不会显示颜色的十六进制值，只会更改文本本身的颜色。根据它的文档，它被设计为与redux-form包一起工作，所以它可能只会与该包一起表现出更多预期的行为，尽管我不确定。

Answer 2

请签出此沙箱https://codesandbox.io/s/hute3?file=/src/styles.css，希望这能解决你的问题，这个沙盒正是你一直在寻找的。