Question

当我在滑块上拖动时，我想更改与UI材质一起使用的图像滑块，但是它只改变灰度，而滑块上什么也没有发生，为什么？我将尝试执行功能，但是我没有ideaa怎么办？有人有吗？

import React, { useState, useEffect } from 'react';
import logo from '../logo.svg';
import defaultImage from '../Image/sen.jpg';
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/lab/Slider";

function ImageSlider ({ value, max, onChange, children }) {
  return (
    <>
      <Typography id="label">
        {children}
      </Typography>
      <Slider className="slider"
        min={0}
        max={max}
        value={value}
        aria-labelledby="label"
        step={1}
        onChange={onChange}
      />
    </>
   )
}


export default function Hooks () {
  const [name, setName] = useState('Franek!');
  const [contrast, setContrast] = useState('100%');
  const [brightness, setBrightness] = useState('100%');
  const [invert, setInvert] = useState("0%");
  const [hue, setHue] = useState("0deg");
  const [saturate, setSaturate] = useState("100%");
  const [sepia, setSepia] = useState("0%");
  const [grayscale, setGrayscale] = useState('0%');
  const [rotation, setRotation] = useState("0deg");
  const [width, setWidth] = useState('0');
  const [height, setHeight] = useState('0');
  const [color, setColor] = useState('black');

  const container = {
    display: 'grid',
    gridTemplateColumns: 'auto auto auto',
    gridTemplateRows: '80px 200px',
    gridGap: '200px',
    padding: '10px'
  }
  const settings = {
    width: '200px',
    maxHeight: '1000px'
  }
  const buttonStyle = {
    height: '50px',
    width: '200px'
  }
  const parametersStyle = {
    height: '50px',
    width: '100px',
    marginBlockEnd: '0',
    marginBlockStart: '0',
    backgroundColor: 'rgba(46, 56, 79, 0.85)',
    padding: '1em'
  }
  const imgStyle = {
    width: '300px',
    height: '300px',
    transform: `rotate(${rotation})`,
    filter: `sepia(${sepia}) grayscale(${grayscale}) hue-rotate(${hue}) saturate(${saturate}) invert(${invert}) contrast(${contrast}) brightness(${brightness})`,    
    color: color
  }
  const elementChangingStyle = {
    maxWidth: '600px',
    maxHeight: '600px'
  }
  const headerTitle = {
    color: '#ffffff',
    fontSize: '40px',
    padding: '1em'
  }
// thiw function but they are get only 50 and see
   function onGrayscale (e, grayscale) {    
     let newGrey = grayscale;
     console.log("this onGrayscale " + setGrayscale('50'));
   }
  return (
    <div>
        <div style={headerTitle}>
          React Photo-Modifier <br/> with Hooks
        </div>  
      <div style={container}>
        <div style={settings}>
          <ImageSlider
              max={100}
              value={grayscale}
              onChange={e => setGrayscale(e.target.value)}
          >
              Grayscale {grayscale}
          </ImageSlider>
        </div>
        <div style={elementChangingStyle}>
          <div>
            <span>
              <img src={logo} className="App-logo" alt="logo" />
            </span>   
          </div>   
          <img style={imgStyle} src={defaultImage} />
          <p style={imgStyle} > {name}</p>
        </div>
      </div>
    </div>
  )  
}

如果我在onGrayscale上触发了功能，我只能滑到50，但是我想动态地执行此操作？怎么办？

如果我将ImageSlider设置为目标值，则更改为灰度，但随后无法使用滑块手动更改吗？我在做什么错了？

编辑1：这个。现在正在工作！在该函数下并返回return。

function onGrayscale (e, grayscale) {    
    setGrayscale(grayscale);
  }
<ImageSlider
   max={100}
   value={grayscale}
   onChange={onGrayscale}
>
   Grayscale {grayscale}
</ImageSlider>

Answer 1

您没有在onGrayScale函数中正确使用函数参数。该函数仅传递值而不传递事件，因此看起来像

   function onGrayscale (grayscale) {    
     let newGrey = grayscale;
     setGrayscale(grayScale);
   }

如何使用钩子在反应中改变灰度？

1 个答案: