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

Question

当我在滑块上拖动时，我想更改用于UI材质的图像滑块，但它只更改灰度，但滑块上没有任何反应，为什么？我会尝试做功能，但我不知道怎么办？有人有吗？

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但我想动态地这样做吗？怎么做？

如果我将图像滑块设置为目标值然后更改为灰度，但我无法使用滑块手动更改？我做错了什么？

编辑1：这个。它现在正在工作！在功能和回报下。

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