React JS Uncaught ReferenceError: locationValue (переменная) не определена

Question

Я пытаюсь передать значение ImageTag, введенное пользователем, а также locationValue, выбранное из раскрывающегося меню (selectField of material-ui) на сервер через разъем.

Вот мой код: -

var BaseImageDetails = React.createClass({ 
getInitialState:function(){ 
    return{ 
     imageTag: '', 
     locationValue: '' 
    }; 

}, 
contextTypes: { 
    socket: React.PropTypes.object.isRequired 
}, 

handleImageChange:function(event){ 
    this.setState({imageTag: event.target.value}); 
    console.log(imageTag); 
}, 

handleLocationChange:function(event){ 
    this.setState({locationValue: event.target.value}); 
    console.log(locationValue); 
}, 


clickedBase: function(e){ 
    e.preventDefault(); 
    this.context.socket.emit("baseImageSubmit",{imageTag},{locationValue}); 


}, 

render(){ 
    console.log("wwooowwowow" , this.props.locationDetails); 
     var locationItems = this.props.locationDetails.map(function(locationItem){ 
      return <MenuItem value = {locationItem} primaryText = {locationItem} /> 
     }.bind(this));  

    console.log("locationItems------------",locationItems); 
    return(
     <div>    
      <Card> 
       <CardHeader 
        title="Please provide the following details ? " 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <form onSubmit = {this.clickedBase} > 
        <TextField hintText="Image Tag" 
        floatingLabelText="Image Tag" 
        value = {this.state.imageTag} onChange = {this.handleImageChange}/> 
        <Divider /> 
        <SelectField 
         fullWidth={true} 
         hintText="Select the location of your base-image Dockerfile" 
         onChange = {this.handleLocationChange} 
         value = {this.state.locationValue}                      
         maxHeight={200}> 
         {locationItems} 
        </SelectField> 
        <Divider /> 
        <RaisedButton label="Secondary" primary={true} 
        label="Build" secondary={true} 
        type = "submit" /> 
       </form>        
       </Card> 
      </div> 
     ); 
    } 
}); 

Но пока утешает он печатает "неперехваченным ReferenceError: locationValue не определен" как для locationValue и ImageTag. Может вы, ребята, помочь мне, где я делаю неправильно ....

Answer 1

Когда вы пишете {imageTag}, это то же самое, как написание {imageTag: imageTag}, и нет никакой локальной переменной называется imageTag на Вашей области.

Вы, вероятно, означает

this.context.socket.emit("baseImageSubmit",{ 
    imageTag: this.props.imageTag 
},{ 
    locationValue: this.props.locationValue 
}); 

Или, если вы пытаетесь использовать destructuring assignments

const {imageTag, locationValue} = this.props; 
this.context.socket.emit("baseImageSubmit",{imageTag},{locationValue});