がSETSTATE変化幅アコード入力値

Question

がユーチューブにこの例に従う反応：

https://www.youtube.com/watch?v=NoaxsCi13yQ#t=17m12s

私はその後、状態の変化「幅」とは、div要素が変更を見ることの入力を持つことを試みました。ここに私のコード：

import React, { Component } from 'react'; 

export default class TestColors extends Component { 
    constructor(props){ 
    super(props); 
    this.handleInputChange = this.handleInputChange.bind(this); 
    this.state = { 
     width: 300, 
    }; 
    } 
    handleInputChange(event) { 
    this.setState((prevState, props) => ({ 
     width: event.target.value, 
    })); 
    } 
    render() { 
    const style = { 
     backgroundColor: 'orange', 
     width: this.state.width, 
    }; 

    return (
     <div style={style}> 
     <input onChange="this.handleInputChange"/> {this.state.width} 
     </div> 
    ); 
    } 
} 

が、私は、レンダリングに、このエラーを取得する：

warning.js:35 Warning: Failed form propType: Invalid prop `onChange` of type `string` supplied to `input`, expected `function`. Check the render method of `TestColors` 

iの入力値を変更したときに、私はこのエラーを取得：

LinkedValueUtils.js:132 Uncaught TypeError: inputProps.onChange.call is not a function 
    at Object.executeOnChange (LinkedValueUtils.js:132) 
    at ReactDOMComponent._handleChange (ReactDOMInput.js:241) 
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69) 
    at executeDispatch (EventPluginUtils.js:85) 
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108) 
    at executeDispatchesAndRelease (EventPluginHub.js:43) 
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54) 
    at Array.forEach (<anonymous>) 
    at forEachAccumulated (forEachAccumulated.js:24) 
    at Object.processEventQueue (EventPluginHub.js:254) 

私にはわかりませんなぜウェブサイト上の例がたくさん使われているのですか（prevStateなし）：

handleInputChange(event) { 
    this.setState({ 
     width: event.target.value, 
    }); 
    } 

以下：

handleInputChange(event) { 
    this.setState((prevState, props) => ({ 
     width: event.target.value, 
    })); 
    } 

違いがありますか？なぜ私は入力値と幅でラベルを更新しない、私はそれのためのreduxが必要ですか？

このリンクを読んだ後、私はSETSTATEが反応サイクルのアップデートで多くの問題を持つ悪魔であることを考え始める：

https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82

が、私はまだインターネット上で明確な回答を見つけられませんでした、ブログ誰かがこの問題を理解する鍵を握っているかもしれませんか？

Answer 1

のonClickにあなたは{}の代わり""に関数呼び出しをラップする必要がJavaScript関数を呼び出したいので、機能にはJavaScriptで、JSXに我々は{}内でJavaScriptを包むためようにあなたのJSXの変更を行います。

<input onChange={this.handleInputChange}/> 

実際に何が起こったのかは、関数を期待していて、文字列を指定していたためにエラーが発生しました。

EDIT： setState関数を使用して異なる方法を述べたので、構文が間違っています。代わりに次のように使用してください：

handleInputChange(event) { 
    this.setState((prevState, props) => { 
     width: event.target.value, 
    }); 
}