状態が変化したときにニードルが更新されない

Question

私は温度計のsvgを持っています。相互作用は、ユーザによって提供された値に従って針を動かすことである。値はレンジャーから提供することができ、温度計は針を動かすことによって更新する必要があります。

あなたはここで

https://www.webpackbin.com/bins/-Khv7qwzOc5OlYE9UY-1こっちは、私はあなたがの heightと y値を設定するので、それを更新していない

componentDidMount(){ 
    this.animationH.setAttribute('from', this.animationH.getAttribute('to')); 
    this.animationH.setAttribute('to', this.state.value); 
    this.animationY.setAttribute('from', this.animationY.getAttribute('to')); 
    this.animationY.setAttribute('to', this.state.value); 
} 

handleChange(event) { 
    this.setState({ value: event.target.value }); 
} 

render() { 
    const {value} = this.state; 

    return (
    <div> 
     <input 
     type="range" 
     min="1" 
     max="100" 
     step="1" 
     onChange={(event) => this.handleChange(event)} 
     /> 
     {value ? value : ''} 
     <svg width="133px" height="350px" viewBox="0 0 133 1113" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <rect id="Rectangle-2" stroke="#979797" strokeWidth="2.132" fill="#C20C0C" filter="url(#filter-1)" x="56.8899994" y="735" width="18" height="200"> 
     <animate 
      attributeName="height" 
      from="0" 
      to="200" 
      fill="freeze" 
      dur="2s" 
      ref={(animationH) => this.animationH = animationH} 
     /> 
     <animate 
      attributeName="y" 
      from="935" 
      to="735" 
      fill="freeze" 
      dur="2s" 
      ref={(animationY) => this.animationY = animationY} 
     /> 
     </rect> 
     </svg> 
    </div> 
); 
} 

Answer 1

を行っているものですデモを見ることができるように、私はWebPACKのビンに例を作成しましたアニメーションを介して<rect>が呼び出され、componentWillMountでトリガーされます。

// In your component 

componentWillMount() { 
    this.animate(); 
} 

animate() { 
    this.animationH.setAttribute('from', this.animationH.getAttribute('to')); 
    this.animationH.setAttribute('to', this.state.value); 
    this.animationY.setAttribute('from', this.animationY.getAttribute('to')); 
    this.animationY.setAttribute('to', this.state.value); 
} 

handleChange(event) { 
    this.setState({ value: event.target.value }, this.animate.bind(this)); 
    // 2nd argument is a callback, called after setState is complete (it is potentially async) 
} 

：値を変更するとき

は新しい方法、animateへcomponentWillMountのコードを抽出し、それを呼び出す変更に

1.トリガーアニメーション：あなたはこの問題を解決する方法の2つのオプションを持っています2. CSSの遷移の代わりに、トリガアニメーション

だけにCSSトランジションをrender -method内部RECTにプロパティを設定し、適用する状態から値（複数可）を使用し、SVGアニメーションを使用しないでください。 heightおよびy。その後、setStateの後に自動的に正しい値がレンダリングされます。

の作業例：いつもの状態に基づいてレンダリングする/：https://www.webpackbin.com/bins/-Ki4KIR0eSLQrGh2JrAz

// In your component 

render() { 
    return (
    ... 
     <rect 
     className="temperature-bar" 
     stroke="#979797" 
     strokeWidth="2.132" 
     fill="#C20C0C" 
     filter="url(#filter-1)" 
     x="56.8899994" 
     y={value} 
     width="18" 
     height={value}> 
    ... 
); 
} 

// CSS for your component 

rect.temperature-bar { 
    transition-property: y, height; 
    transition-duration: 2s; 
    transition-timing-function: linear; 
} 

私はそれが核となるアイデアを次のための後ろに反応して、可能な限り、私は2番目のアプローチをお勧めし

を示唆していますアニメーションをトリガするときに行っているように、レンダリングメソッドの外にDOMを変更しないでください）。

PS：今度は完全に間違っていると思われるので、yとheightを正しく計算する必要がありますが、おそらくそれは分かっていたはずです。