2016-11-29 2 views
0

私のコードを見てくれてありがとう、React.jsを使用して検索バーを作成しています。コンストラクタ内でinputChangeをバインドするonInputChangeがコンストラクタでバインドされると、フォームのテキストフィールドには入力できません。 console.logを試してみると、イベントキーのストロークはキャプチャされているが、テキスト入力フィールドには何も表示されないことがわかります。(React.jsフォームフィールド)コンストラクタでbind onChangeを使用した後にテキストフィールドに入力できません

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { fetchWeather } from '../actions/index'; 

    class SearchBar extends Component { 
     constructor(props) { 
      super(props); 
      this.state = { term: '' }; 

      this.onInputChange = this.onInputChange.bind(this); *(if I comment out onInputChange bind statement then I can type in the form field) 

      this.onFormSubmit = this.onFormSubmit.bind(this); 
     } 

     onInputChange(event) { 
      console.log(event.target.value); 
      this.setState = ({ term: event.target.value }); 
     } 

     onFormSubmit(event) { 
      event.preventDefault(); 
      this.props.fetchWeather(this.state.term); 
      this.setState({ term: '' }); 
     } 

     render() { 
      return ( 
      <form onSubmit={this.onFormSubmit} className="input-group"> 
       <input type="text" 
        placeholder="Five day forcast for your favorite cities" 
        className="form-control" 
        value={this.state.term} 
        onChange={this.onInputChange} /> *(tried this.onInputChange.bind(this) but same thing happened) 

       <span className="input-group-btn"> 
        <button type="submit" className="btn btn- secondary">Submit</button> 
       </span> 
      </form> 
      ); 
     } 
    } 

    function mapDispatchToProps(dispatch) { 
     return bindActionCreators({ fetchWeather }, dispatch); 
    } 

    export default connect(null, mapDispatchToProps)(SearchBar); 

答えて

1

なぜオブジェクトをsetStateメソッドに割り当てるのですか?それで、これは変わらない。

onInputChange(event) { 
    console.log(event.target.value); 
    this.setState({ term: event.target.value }); // <-- fixed it 
} 
+1

ありがとうございます!できます!それは愚かな間違いですが、私はそれをキャッチせずに壁に頭を打つ時間を費やしました。再度、本当にありがとうございます。 –

関連する問題