Javascript 滑块上的React onchange函数与html img

我试图改变风格时，滑块改变。例如，我想在React中增加滑块时添加亮度。我这样做了，但是每当滑块通过onchange事件时，我似乎无法将样式添加到图像中。代码如下：

import React, { Component } from 'react';
import { BsFileEarmarkPlus } from 'react-icons/bs';
import ReactSlider from 'react-slider';

class Edit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            file: null,
        }
        this.ImageUpload = this.ImageUpload.bind(this);
        this.ChangeImage = this.ChangeImage.bind(this);
    }

    ImageUpload(event) {
        console.log(event.target.files[0]);
        this.setState({
            file: URL.createObjectURL(event.target.files[0]),
        });
    }

    ChangeImage(props) {
        console.log(props);
        var amount = this.props + '%';
        var imgStyles = {
            filter: 'brightness(' + amount + ')'
        }
    }

    render() {
        return (
            <div className="editor">
                <h1>Editor</h1>
                <label htmlFor="fileChoose"><BsFileEarmarkPlus />Upload
                    <input type="file" id="fileChoose" onChange={this.ImageUpload} />
                </label>
                <hr />
                <div className="img-surround">
                <img 
                    src={this.state.file} 
                    id="img"
                    style={imgStyles} />
                </div>

                <div className="edit-nav">
                    <ReactSlider
                    className="horizontal-slider"
                    defaultValue={0}
                    max={100}
                    min={-100}
                    thumbClassName="example-thumb"
                    trackClassName="example-track"
                    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
                    onChange={this.ChangeImage}
                    />
                </div>
            </div>
        );
    }
}

export default Edit;

import React，{Component}来自'React'；
从'react icons/bs'导入{bsfilearmarkplus}；
从“反应滑块”导入反应滑块；
类编辑扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文件：null，
}
this.ImageUpload=this.ImageUpload.bind（this）；
this.ChangeImage=this.ChangeImage.bind（this）；
}
图像上载（事件）{
console.log（event.target.files[0]）；
这是我的国家({
文件：URL.createObjectURL（event.target.files[0]），
});
}
改变形象（道具）{
控制台日志（道具）；
var金额=this.props+'%'；
变量imgStyles={
过滤器：“亮度（“+amount+”）”
}
}
render（）{
返回(
编辑
上传

{state.valueNow}
onChange={this.ChangeImage}
/>
);
}
}
导出默认编辑；

---

唯一的问题是imgStyles在从render（）外部调用时未定义。其他一切都可以工作。

因为您在“ChangeImage”函数中定义了“imgStyles”变量。 您应该在类外定义此变量或将其定义为状态变量

var imgStyles = {};
class Edit extends React.Component {
...

 ChangeImage(props) {
  console.log(props);
  var amount = this.props + '%';
  imgStyles = {
   filter: 'brightness(' + amount + ')'
  }
 }
...

或

。。。
建造师（道具）{
超级（道具）；
此.state={
文件：null，
imgStyles:{}
}
}
...
改变形象（道具）{
控制台日志（道具）；
var金额=this.props+'%'；
this.setState（{imgStyles:{filter:'brightness（'+amount+'）'）}）；
}
...
...

有趣的是，请逐步执行或添加日志记录，以确保更新了正确的元素。我在imgStyles的console.log（）中执行了此操作。它返回的结果与代码示例中定义的完全相同。唯一的问题是，他们说道具是一个[对象]，但当记录道具本身时，它给出了滑块的当前值。删除这个.props到props实际上改变了它的价值，所以谢谢

...
 constructor(props) {
  super(props);
  this.state = {
   file: null,
   imgStyles: {}
  }
 }
...

ChangeImage(props) {
  console.log(props);
  var amount = this.props + '%';
  this.setState({ imgStyles: { filter: 'brightness(' + amount + ')' } });
}
...
     <img 
      src={this.state.file} 
      id="img"
      style={this.state.imgStyles} />
...