無法調用在組件內部聲明的函數

Question

嘗試調用在組件內聲明的函數時出錯。 這是錯誤消息：未捕獲的類型錯誤：無法讀取未定義的屬性“handleClick”

class LanguageDropDown extends Component {
  constructor(props) {
    super(props);

    this.state = {languageValue: ""};
    this.handleLanguageClick = this.handleLanguageClick.bind(this);
  }
  handleLanguageClick = (languageKey) => {
    this.setState({ languageValue: languageKey});
  }

  render() {
    const {intl, value, onChange, onFocus, onBlur, onClick} = this.props;
    return (
      <React.Fragment>
        {
          map(languageWhitelist, function(Key) {
            return (
              <option onClick={this.handleLanguageClick(Key)}
              key={Key} value={Key}></option>
             );
            }, this)
          }
      </React.Fragment>
    );
  }

}

Answer 1

這應該工作

class LanguageDropDown extends Component {
  state = { languageValue: '' };

  _handleLanguageClick(languageValue) {
    this.setState({ languageValue });
  };

  render() {
    const { intl, value, onChange, onFocus, onBlur, onClick } = this.props;

    return (
      <React.Fragment>
        {languageWhitelist.map(language => (
          <option
            onClick={() => this._handleLanguageClick(language)}
            key={language}
          >
            {language}
          </option>
        ))}
      </React.Fragment>
    );
  }
}

Answer 2

通過在類中使用箭頭函數，它會自動綁定到該類，因此只需從構造函數中刪除綁定語句即可。 並將onClick道具設置為回調函數。

class LanguageDropDown extends Component {
  constructor(props) {
    super(props);

    this.state = { languageValue: '' };
  }

  _handleLanguageClick = languageValue => {
    this.setState({ languageValue });
  };

  render() {
    const { intl, value, onChange, onFocus, onBlur, onClick } = this.props;

    return (
      <React.Fragment>
        {languageWhitelist.map(language => (
          <option
            onClick={() => this._handleLanguageClick(language)}
            key={language}
          >
            {language}
          </option>
        ))}
      </React.Fragment>
    );
  }
}