react 無限ループします... (react, redux)

Question

現在react-reduxにてチャットアプリケーションを作成しています。
inputのvalueの参照方法がいまいちわからないのでこのようなコードでinputの中身を参照していますが、
このコードだとブラウザーが無限ループしてしまうようで、テストができずに困っています。

class InputArea extends React.Component{

  constructor(){
    super();
    this.state = {
      inputText: ''
    }
  }

  _onChanges(e){
    this.setState({
      inputText: e.target.value
    })
  }

  render(){
    const { onSend } = this.props;
    return(
      <div>
        <input
          type="text"
          placeholder="input your text !!"
          onChange={this.state._onChanges}
        />
      <button onClick={this.props.onSend(this.state.inputText).bind(this)}>送信</button>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return{
    onSend:(object) => {dispatch(sendMessage(object))}
  }
}

なぜこのコードが間違っているのかと、
reduxの場合のinputの参照方法を詳しく教えていただきたいです。

ちなみに

class InputArea extends React.Component{
  render(){
    let inputs;
    const { onSend } = this.props;
    return(
      <div>
        <input
          type="text"
          placeholder="input your text !!"
          ref={(node) => {
            inputs = node
          }}
        />
      <button onClick={this.props.onSend(inputs.value)}>送信</button>
      </div>
    );
  }
}

このような参照方法だと、

Uncaught TypeError: Cannot read property 'value' of undefined

のエラーになってしまいます。。。

Answer 1

onChange={this.state._onChanges}
↓
onChange={ e => this._onChanges(e) }
ぢゃないでしょうか？

Comments

[k.tada]

それと
<button onClick={this.props.onSend(this.state.inputText).bind(this)}>送信</button>
の`.bind(this)`は不要な気がします。

[yuki_nagahama]

ご回答いただきありがとうございます。
そちらのonChangeイベントの方は教えていただいたコードでうまくいきました。
ありがとうございました。

ただ、
buttonのイベントonClick=『this.props.onSend(this.state.inputText).bind(this)』
の方で無限ループをしてしまうようです...

[k.tada]

あーそうか、失礼しました。`bind`が不要なのじゃなくて
<button onClick={this.props.onSend.bind(this, this.state.inputText)}>送信</button>
でどうでしょう？

[yuki_nagahama]

なるほどです。こちらのコードでできました。
ありがとうございました。
ちなみにもう一点質問なのですが、
通常はbind(this)なのですが、
bindの第一引数と第二引数はどういった意味なのでしょうか。

[k.tada]

解決したようでよかったです。
bindの引数については、以下のとおりです。
* 第一引数：対象メソッドの実行コンテキストになる（対象メソッドのthisにセットされる）
* 第二引数以降の引数：対象のメソッドに渡される引数となる