為什么我的函數被認為是未定義的？

Question

為什么我的函數onInputBlur被認為是未定義的？ 我想這非常愚蠢，但我嘗試在構造函數和其他變體中進行綁定。

import React from 'react';

class StateSelect extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    onInputBlur = (event) => {
        let choiceType = event.target.id.toString()
        let choice = event.target.value

        console.log(this.props.state)
    }

    render() {
        const { styles } = this.props
        return (
            <div style={styles.formInput}>
                <select id="state" name="state" onChange={this.props.saveInputVal} onBlur={onInputBlur} style={styles.input}>
                    <option value disabled selected>State</option>
                    {Object.keys(States).map((key) => {
                        return ( <option key={key} value={key}>{States[key]}</option> )
                    })}
                </select>
            </div>
        )
    }
}

Answer 1

你需要寫onBlur={this.onInputBlur} 。 您可以使用this關鍵字訪問類屬性

片段

render() {
    const { styles } = this.props
    return (
      <div style={styles.formInput}>
        <select id="state" name="state" onChange={this.props.saveInputVal} onBlur={this.onInputBlur} style={styles.input}>
          <option value disabled selected>State</option>
          {Object.keys(States).map((key) => {
            return ( <option key={key} value={key}>{States[key]}</option> )
          })}
        </select>
      </div>
    )
}