Question

我是React的新手，一切都很痛苦，特别是了解专为多年经验而设计的专业文档。

我的问题：反应头像编辑器 https://github.com/mosch/react-avatar-editor 列出了可用的＆＃34;道具＆＃34;，这就是我需要帮助的地方。我有一个用户界面，但我不了解如何添加逻辑。我知道我不需要编写自己的所有功能。这是使用这样的包的目的。但我确实需要帮助理解简洁的文档。

我的代码：没有做任何令人惊奇的事情，但它是以这样的方式构建的，我认为代码可以工作，状态设置，然后我需要函数，如handleScale()，我不会这样做。我知道怎么写，到.setState并改变状态。显然，我需要为每个财产中的一个。

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

但是文档中有一个道具列表以及它们的列表。如何使用Prop更改比例？这可能是一个荒谬的问题，但我试图理解一些高于我头脑的文档并且可以使用任何帮助。

我也可以使用帮助挂钩滑块来改变图像的大小。无论是国家还是道具 - 我认为这是基本的JS，但我仍然不确定程序。在React Dev Tools中，滑块作为道具上下移动。 http://mosch.github.io/react-avatar-editor/docs/

在发布之前，我到处搜索有关此主题的教程，在React中编辑图像。如果有人知道任何或任何教程：这个包，请指示我！

Answer 1

您handleScale函数应将this.state.scale设置为不同的数字，它将按预期工作。

在您的情况下，代码应如下所示

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

并且您的输入应正确绑定handleScale函数

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

有关此.bind()的更多信息：Use of the JavaScript 'bind' method

以上代码将根据滑块的值更改比例。

如何在react-avatar-editor

1 个答案: