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>
        );
    }
});

但是，虽然安慰它打印＆＃34; Uncaught ReferenceError：locationValue未定义＆＃34;都是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});

React JS Uncaught ReferenceError：未定义locationValue（变量）

1 个答案: