如何获取指针值onChange

时间:2019-04-18 12:22:02

标签: reactjs color-picker

我正在使用React Color(https://casesandberg.github.io/react-color/)来选择颜色。该组件工作正常,我只想获取指针的目标值。我应该怎么做? 渲染功能:

 render() {
        let slider = this.state.adjust.map((element, i) => {
          if(element.name !== 'tint'){
          if (element.name === 'brightness' || element.name === 'contrast' || element.name === 'saturation' || element.name === 'hue' ||
            element.name === 'vibrance' || element.name === 'exposure') {
            return (
              <Slider
                SliderRange={element}
                draggged={(event, element) =>
                  this.slidderChangeHandler(event, element)
                }
                min="-100" max="100" step='1' slidertype={element.name}
                key={element.name + i}

              />
            );
          } else {
            return (
              <Slider
                SliderRange={element}
                draggged={(event, element) =>
                  this.slidderChangeHandler(event, element)
                }
                min="0" max="100" step='1' slidertype={element.name}
                key={element.name + i}
              />
            );
          }
        }else{
          console.log(element);

          return ( 
            <div className="slidecontainer" key={element.name + i}>
               <span className="trans">Tint</span>
               <Hue width={60 + '%'} onChange={(event) => this.slidderChangeHandler(event,element) } />
               <span>0</span>
            </div>

          )
        }

slidderChangeHandler函数:

slidderChangeHandler = (event, element) => {
    // event.persist();
   console.log(event, element);

    let temp = element;
    let adjust = [...this.state.adjust];
    adjust.map(el => {
      if (el.name === element.name) {
        el.range = event.target.value;
      }
    });
    adjust = [...this.state.adjust]
    this.setState({ adjust: adjust, changedElement: element }, () => {
      this.applyFilter(temp);

    });
  };

0 个答案:

没有答案