リアクションアバターエディタの機能の使い方

Question

私はリアクションには新しく、すべてが苦痛で、特に長年の経験を持つ熟練者用に設計されたドキュメントを理解することは苦痛です。

私の問題：リアクションアバターエディタ https://github.com/mosch/react-avatar-editor は、利用可能な「小道具」のリストを示しています。これが私の助けになります。私はUIを持っていますが、ロジックを追加する方法はわかりません。私は自分自身のすべての機能を書く必要はないことを知っています。これがこのようなパッケージを使用する目的です。しかし、私は本当に簡潔な文書を理解するのに役立つ必要があります。

私のコード：驚くべきことは何もしていませんが、状態が設定された状態でコードが動作すると思ったように構築されています。そして、私は書く方法がわからないhandleScale()まだ、状態を設定し、変更します。明らかに私はすべてのプロパティのためにこれらのいずれかが必要です。

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

しかし、ドキュメントには、小道具のリストと、それらが何をするかのリストがあります。小道具を使用して規模を変更するにはどうすればよいですか？これはばかげた質問かもしれませんが、私は頭の上にあり、どんな助けも使うことができるいくつかのドキュメントを理解しようとしています。

私はヘルプを使って画像のサイズを変更するスライダを接続することもできます。それが国家であろうと小道であろうと、それは基本的なJSだと思うが、依然として、私はその手順については分からない。 React Dev Toolsでは、スライダーは小道具として上下に移動します。 http://mosch.github.io/react-avatar-editor/docs/

ここに投稿する前に、このトピックに関するチュートリアルを検索し、Reactで画像を編集しました。もし誰かが知っている、または任意のチュートリアル：このパッケージは、そこに私を指示してください！

Answer 1

handleScale関数は、this.state.scaleを別の数値に設定する必要があり、期待どおりに動作します。 Use of the JavaScript 'bind' method

上記のコードの意志：

あなたのケースでは、コードは

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

に続き、あなたの入力が正しくここ.bind()について

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

もっとhandleScale機能をバインドする必要がありますようになりますスライダーの値に基づいてスケールを変更します。