如何在react-avatar-editor中使用函数

我是React的新手，一切都很痛苦，尤其是理解专为具有多年经验的专业人员设计的文档。如何在react-avatar-editor中使用函数

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

我的代码：没有做任何让人惊叹的事情，但它的构造方式是我认为代码可以工作，状态设置，然后我需要函数，如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> 
    ) 
    } 
}

但是文档有一个Props列表和它们所做的列表。如何更改支柱的比例？这可能是一个荒谬的问题，但我试图理解一些高于我的文档并可以使用任何帮助。

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

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

来源

2017-03-02 Mote Zart

那么，文档清楚地表明Scale是一个数字，所以在你的处理程序中它应该是：'handleScale（event）{this.setState（{scale：event.target.value}）; }' –

既然它是一个输入，我最近才知道它需要用'value'绑定到setState，我需要'event.target.value'。它在教程中看到了这个，并且忘记了。我不知道如何传递数字，但最终获得滑块来处理程序包的“缩放”功能。通过下面的这个和@DeividasKaržinauskas的解决方案，我能够得到它的工作。一旦我确信自己知道我在说什么，我就会解释我是如何解决这个问题的。 –

您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

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

来源

2017-03-02 05:51:34

即使使用了'.bind（this'），出于某种原因，我得到了一个未定义的错误，现在虽然工作正常，我仍然不理解扩散算子，但使用它也有助于阻止错误。不理解像手头那样的属性中的“道具”正在通过'state'或'props'传递，因为它们在文档中被称为“道具”，而我几乎不知道这些内容。我的情况都是'this.state.'我知道这一定是一切听起来很愚蠢的。 –

@MoteZart如果这对你有帮助，一定要把它标记为正确，这样其他人才能节省时间。 –

完成。我不知道该怎么做。如果您没有使用过b4，勾选标记很难看清楚。这意味着我从来没有关闭过案例b4！你也注意到了这个事实，所以我会关闭所有的开放案例。 –

如何在react-avatar-editor中使用函数

回答

相关问题