入力フィールドを使用してReact JSでハイチャートを更新するには

Question

ユーザーが独自の色設定をカスタマイズできる入力フィールドを持つハイチャートチャートを作成しようとしています。しかし、私はReact JSの使用に比較的新しいです。私は、入力フィールドから値を渡してチャートオプションに追加し、送信ボタンがクリックされたときにチャートを更新したいと思っています。私はsetState（）とReact APIから再描画（）を試してみましたが、私はそれに運がないです。ブラウザで実行しているときにこのエラーが発生しました：

Uncaught TypeError: Cannot read property 'setState' of undefined 
    at HTMLButtonElement.<anonymous> (VM111:125) 
    at HTMLButtonElement.dispatch (jquery.min.js:3) 
    at HTMLButtonElement.q.handle (jquery.min.js:3) 
(anonymous) @ VM111:125 
dispatch @ jquery.min.js:3 
q.handle @ jquery.min.js:3 

ご協力いただきありがとうございます！

$('#submit').click(function() {  
      this.chart.setState(function() { 
      return { 
       chart:{ 
         backgroundColor: '' + $('#backgroundColorSetting').val() //sets chart background 
       }, 
       series: [{ 
         color: '' + $('#colorSetting').val(),   //sets the color of Line 
        name: $('#xaxis').val()         //sets name of X-Axis 
       }], 
       yAxis:{ 
         text: $('#yaxis').val()        //sets name of Y-Axis 
       } 

      } 
      }); 
    }); 
var Chart = React.createClass({ 

    componentDidMount: function() { 

     if (this.props.modules) { 
     this.props.modules.forEach(function(module) { 
      module(Highcharts); 
     }); 
     } 

     this.chart = new Highcharts[this.props.type || "Chart"](
     this.props.container, 
     this.props.options 
    ); 
    }, 

    componentWillUnmount: function() { 
     this.chart.destroy(); 
    }, 

    render: function() { 
     return React.createElement('div', { 
     id: this.props.container 
     }); 
    } 
    }), 
    categories= ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    data= [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
element = React.createElement(Chart, { 
    container: 'chart', 
    options: { 

    title: { 
     text: 'Inverted Chart' 
    }, 
    chart: { 
      inverted: true, 
      polar: false 
      }, 
    subtitle: { 
     text: 'Subtitle1' 
    }, 

    xAxis: { 
     categories: categories 
    }, 
    series: [{ 
     type: 'line', 
     colorByPoint: true, 
     data: data, 
     lineColor:'#f7eac8' 
     //showInLegend: false 
    }] 
    } 
    }); 
    ReactDOM.render(element, document.getElementById('react-inverted')); 

Answer 1

Reactを使用する場合は、jQueryを使用する必要はありません。フォームはReactコンポーネントで処理できます。 React docsでforms（特に制御されたコンポーネント）について読むことをお勧めします。私は制御されていないコンポーネントを使用します。

変更は、フォームをレンダリングする方法レンダリング：

render: function() { 
    return React.createElement('div', null, 
     React.createElement('div', { 
     id: this.props.container 
     }), 
     React.createElement('form', { 
      onSubmit: this.onSubmit 
     }, 
     React.createElement('input', { 
      ref: input => this.colorInput = input, 
      placeholder: 'Type red, black or blue' 
     }), 
     React.createElement('input', { 
      type: 'submit' 
     }) 
     ) 
    ); 
    } 

をしてAxis.update()

onSubmit: function(e) { 
    e.preventDefault(); 

    var color = this.colorInput.value; 
    if (['red', 'black', 'blue'].includes(color)) { 
     this.chart.xAxis[0].update({ 
     lineColor: color 
     }); 
    } 
    }, 

ライブの例を経由して軸を更新します提出するハンドラを定義：https://jsfiddle.net/mec4huyw/