Невозможно отобразить значение во входном поле с помощью material-ui-color-picker

#reactjs #material-ui

#reactjs #material-ui

Вопрос:

Моя цель — отобразить значение цвета в поле ввода. Я не смог получить значение цвета в текстовом поле. Кто-нибудь может помочь мне в этом запросе получить значение цвета, которое должно принимать только шестнадцатеричные значения цвета?

Вот код:

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


  

Вот пример
Кто-нибудь, пожалуйста, может помочь мне в этом запросе?

Ответ №1:

Вы не настраиваете value реквизит для отражения цвета, который вы сохраняете в своем состоянии. Вот исправленная песочница.

Этот компонент ведет себя странно в том смысле, что, похоже, он не отображает шестнадцатеричное значение цвета при выборе нового, только изменяет цвет самого текста. Согласно его документам, он был разработан для работы с redux-form пакетом, поэтому он может демонстрировать более ожидаемое поведение только в сочетании с этим пакетом, хотя я не уверен.

Ответ №2:

Пожалуйста, проверьте эту изолированную средуhttps://codesandbox.io/s/hute3?file=/src/styles.css надеюсь, это решит вашу проблему, эта изолированная среда — именно то, что вы искали.

Комментарии:

1. я хочу сохранить значение в переменной состояния. Не могли бы вы, пожалуйста, помочь мне в этом