4

私は反応フレームワークの初心者なので、私の質問は多くの人にとって基本的なものに見えるかもしれません。しかし、私はこの部分で立ち往生していると信じてください。ボタンのクリック時にテキスト ボックスの値を取得し、その値を小道具として他の関数に送信しようとしています。テキスト ボックス フィールドの値を抽出することはできますが、クリック イベントで、「未定義のプロパティ 'props' を読み取れません」というエラーが発生します。

重要なポイントは次のとおりです。

  1. termchange() は、入力テキスト値を抽出するために使用されます。
  2. handleclick は、テキストボックス値の onclick イベントを抽出するために使用されます。
  3. oncitychange は、テキストボックスの値を送信する関数です (oncitychange() 関数は別のコンポーネント内にあります)。

前もって感謝します。

ここに私のコードがあります:-

import React,{ Component } from 'react';
import ReactDom from 'react-dom';
class SearchBar extends Component {
  constructor(props){
    super(props);
    this.state = {
      cityname:''
    }
  }

  render(){
    return(
      <div>
        <span>Enter the city: </span>
        <input type="text" id="txtbox" value={this.state.cityname} 
          onChange={event=>this.termchange(event.target.value)} />
        <input type="submit" onClick={this.handleclick} />
      </div>
    );
  }

  termchange(cityname){
    this.setState({cityname});
  }

  handleclick(){
    this.props.oncitychange(cityname);
  }
}

export default SearchBar;
4

3 に答える 3

8

それはすべてスコープに関するものです。あなたの機能は何が何でthisあるかを知りません。thisコンストラクターでバインドするか、環境によっては他のオプションの方が簡単な場合があります。

これをコンストラクターに追加して修正します。

this.termchange = this.termchange.bind(this); this.handleclick = this.handleclick.bind(this);

または、 https://blog.andrewray.me/react-es6-autobinding-and-createclass/を読んで、何が起こっているかのより詳細な説明を確認してください。

私は個人的に、単純化のために ES7 の太い矢印クラス メソッドを使用しています。ほとんどの開発者はその方向に進んでいると思います。

于 2017-11-29T19:22:04.083 に答える
0

次のように置き換えるだけonClick={this.handleClick}です：

onClick={this.handleClick.bind(this)}

そうすれば、関数スコープは React オブジェクトにタイトになります

于 2017-11-29T19:24:03.553 に答える