如何在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中使用函數

回答

相關問題