我正在使用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);
});
};