How to use functions in react-avatar-editor

Question

I'm new to React and everything is painful, especially understanding the docs that are designed for pros w/ years of experience.

My Problem : The react-avatar-editor https://github.com/mosch/react-avatar-editor gives a list of the available "props", and this is what I need help with. I have a UI but I don't understand how to add logic to it. I know I don't need to write all my own functions. That is the purpose of using a package like this. But I do really need help understanding the concise documentation.

My CODE: not doing anything amazing, but it is constructed in that way that I thought code would work, with the state set, and then I would need functions, like handleScale(), which I don't know how to write yet, to .setState and change the state. Obviously I'd need one of these for every property.

class MyEditor extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      width: 250,
      height: 250,
      border: 50,
      color: [255, 255, 255, 0.6],
      scale: 1.2,
      rotate: 0,
    };
  }
  handleScale(scale){
    this.setState({
      scale:"some function that changes the scale"
    })
  }
  render () {
    return (
      <div className="image-editor-container">
      <AvatarEditor
        image={this.props.url}
        width={this.state.width}
        height={this.state.height}
        border={this.state.border}
        color={this.state.color} // RGBA
        scale={this.state.scale}
        rotate={this.state.rotate}
      />
      <div className="range-slider">Zoom:
      <input type="range" onChange={this.state.handleScale}/>
      </div>
      </div>
    )
  }
}

But the docs have a list of Props and a listing of what they do. How do I change the scale with a Prop? This might be a ridiculous question, but I'm trying to understand some docs that are above my head and could use any help.

I could also use help hooking up an a slider to change the size of the image. Whether it be state or props- this is basic JS I think but still, I'm not sure of the procedure. In the React Dev Tools the slider moves up and down as props. http://mosch.github.io/react-avatar-editor/docs/

Before posting here I searched everywhere for a tutorial on this subject, editing images in React. If anyone knows of any, or any tutorials re: this package, please direct me there!

Well, the docs clearly show that Scale is a number, so in yours handler it should just be: `handleScale(event) { this.setState({scale: event.target.value }); }` — Matthew Herbst, Mar 02 '17 at 03:23
Since it is an input, I only recently learned that it needs to be bound to the setState with `value`, and I needed the `event.target.value`. It saw this in a tutorial and forgot. I didn't know how to pass the Number, but eventually got the slider to work the the package's `scale` function. With this and @Deividas Karžinauskas's solution below, I was able to get it working. I'll provide an explanation of how I solved it once I'm sure I know what I'm talking about. — Mote Zart, Mar 02 '17 at 21:34

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

You handleScale function should set this.state.scale to a different number and it will work as expected.

In your case the code should look as follows

handleScale(event){
  this.setState({ ... this.state, // you want other state details to remain unchanged
    scale: event.target.value
  })
}

and your input should bind the handleScale function correctly

<input type="range" onChange={ this.state.handleScale.bind(this) }/>

More about .bind() here: Use of the JavaScript 'bind' method

The above code will change the scale based on the slider's value.

edited May 23 '17 at 12:00

Community

1
1

answered Mar 02 '17 at 05:51

Deividas

6,437
2
26
27

I was getting an undefined error even with the `.bind(this` for some reason. Now it's working though. And I still don't understand the spread operator, but using it has also helped stop the errors. I didn't understand that the "props" as in the properties at hand, like color, were being passed by `state` or by `props`, since they are called `props` in the docs and I just barely learned the dif. In my case it's all `this.state.` I realize this must all sound idiotic. – Mote Zart Mar 02 '17 at 21:17
@MoteZart if this helped you, make sure to mark it as correct so others could save time. – Deividas Mar 03 '17 at 04:27
Done. I didn't know how to do that. The checkmark is hard to see if you haven't used it b4. This means I have never closed a case b4! U have also alerted me to this fact, and so I will go close all my open cases. – Mote Zart Mar 03 '17 at 18:32

How to use functions in react-avatar-editor

1 Answers1