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