Question

我有以下场景，并且我不知道如何在SearchComponent中访问EventHandler函数。

问题在于我无法从

中读取值

let transportItems = EventHandlers.getTransportModeItems; 
// If use EventHandlers.getTransportModeItems() 
// I get a message that says React is undefined

在SearchComponent中

。

SearchComponent.jsx

import React, { Component } from 'react';
import BaseSearchComponent from './baseSearch/baseSearch'
import EventHandlers from './helpers/eventHandlers'

export default class SearchComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            transportChoices: {
                from: '',
                to: ''  
            },
            error: {
                from: '',
                to: ''
            }
        };
    }

    render() {
        let fromClass = this.state.error.from ? 'has-error': '';
        let toClass = this.state.error.to ? 'has-error': '';
        let transportItems = EventHandlers.getTransportModeItems; // If use EventHandlers.getTransportModeItems() I get a message that says React is undefined

        console.log(transportItems);

        return (
            <div className="container search-container">
                <div className="row">
                    <div className="col-md-12">
                        <form action="/search" method="GET">
                            <DefaultSearchComponent fromClass={fromClass} toClass={toClass}
                                transportModeItems={transportItems} 
                openModeDropdown={EventHandlers.openModeDropdown}
                state={this.state}  />

                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

baseSearchComponent.jsx

import React, { Component } from 'react';
import Autocomplete from 'react-google-autocomplete';

export default class BaseSearchComponent extends Component {

    render() {
        return (
        <div className="form-container">
            <div className="white-container">
                <div className={'from-col ' + this.props.fromClass}>
                    <div className="autocomplete-container">
                        <label className="lbl-from" htmlFor="from">FROM:</label>
                        <Autocomplete id="from" name="from" className="from-field"
                        types={[]} componentRestrictions={{country: "us"}} />
                  </div>
                    <div className="from-input-error">{this.props.state.error.from}</div>
                </div>
                <div className={'to-col ' + this.props.toClass}>
                    <div className="autocomplete-container">
                        <label className="lbl-to" htmlFor="to">TO:</label>
                        <Autocomplete id="to" name="to" className="to-field"
                        types={[]} componentRestrictions={{country: "us"}} />
                    </div>
                    <div className="to-input-error">{this.props.state.error.to}</div>
                </div>
                <div className="mode-col">
                    <div className="transport-mode-container" onClick={this.props.openModeDropdown} >
                        <label className="lbl-type">Mode</label>
                        <img src={this.props.state.transportChoices.mode_icon} id="img_mode_selected" />
                        <input type="text" className="transport-mode-value" disabled="true"
                        name="transportMode" id="input_mode_selected" value={this.props.state.transportChoices.mode} />
                    </div>
                    <ul className={'transport-mode-dropdown ' + this.props.dropdownModeVisible} >
                        {this.props.transportModeItems}
                    </ul>
                </div>
            </div>
        </div>
   );
    }
}

和eventHandlers.jsx

import constants from '../shared/util/constants.json';

let eventHandlers = {
  getTransportModeItems: function() {
    console.log("function triggered");
    // component.props.actions.updateNavigator('basalRate')
    const transportModes = constants.transport_modes
    let transportOptions = []
    for (var k = 0; k < transportModes.length; k++) {
        transportOptions.push(<li key={k}
        onClick={this.handleSelectMode.bind(this, transportModes[k])}>
        {transportModes[k].label} <img src={transportModes[k].icon} /></li>)
    }
    return transportOptions;
  }


  openModeDropdown() {
    this.setState({displayMode: !this.state.displayMode})
  }

};

export default eventHandlers;

此外，我无法访问eventHandlers.jsx中的openModeDropdown函数并使用this.setState。

我做错了什么或者可以做另外的事情吗？

Answer 1

在第14行，您应添加一个逗号，表示您要定义另一个属性。

        return transportOptions;
      },
    // ^ This comma was missing!

值得注意的是，为了保持一致，我会将openModeDropdown方法声明为openModeDropdown: function () { ...而不是openModeDropdown() {...。

eventHandlers.jsx应如下所示：

import constants from '../shared/util/constants.json';

let eventHandlers = {
  getTransportModeItems: function() {
    console.log("function triggered");
    // component.props.actions.updateNavigator('basalRate')
    const transportModes = constants.transport_modes
    let transportOptions = []
    for (var k = 0; k < transportModes.length; k++) {
        transportOptions.push(<li key={k}
        onClick={this.handleSelectMode.bind(this, transportModes[k])}>
        {transportModes[k].label} <img src={transportModes[k].icon} /></li>)
    }
    return transportOptions;
  },

  openModeDropdown: function () {
    this.setState({displayMode: !this.state.displayMode})
  }
};

export default eventHandlers;

如何从React组件访问eventHandler函数？

1 个答案: