简体   繁体   中英

getValue() for SelectField

All I simply want to do is to get the name of the Company and save it to the database

I was trying with do with text, and was trying to fetch using the below code

sport: this.refs.company.getValue(), and it was working perfect.

Then I decided to use the SelectField from Material UI for Company

And it's not fetching the data.

constructor(props) {
super(props);
this.state = {
  value: 1,
};
}

submitResume(event) {
    event.preventDefault();
    console.log(this.state.company.getValue({value}));

CreatePost.insert({
        company: this.refs.company.getValue(),

        employee: this.refs.employee.getValue(),

    });
    console.log("Employee Profile Submitted!");
}


handleNameChange = (event, index, value) => this.setState({value});

    <form onSubmit={this.submitResume.bind(this)}>

          <SelectField
                    floatingLabelText="Company Name"
                    className="validate"
                    ref="company"
                    id="company"
                    floatingLabelStyle={{fontSize:20}}
                    fullWidth={true}
                    value={this.state.value}
                    onChange={this.handleNameChange}
                  >
                    <MenuItem value={1} primaryText="Google" />
                    <MenuItem value={2} primaryText="Facebook" />
                    <MenuItem value={3} primaryText="Amazon" />
                    <MenuItem value={4} primaryText="Nest" />
                    <MenuItem value={5} primaryText="Microsoft" />
            </SelectField>

            <TextField
                className="validate"
                type="text"
                ref="employee"
                id="employee"
                hintText="Enter Full Name"
                floatingLabelStyle={{fontSize:20}}
                floatingLabelText="Employee Name"
                multiLine={true}
                rows={1}
                fullWidth={true}
            />

It's working fine for TextField, but not for SelectField.

Now see this updated one you will get your value in one of the parameter value , index or event

constructor(props) {
super(props);
this.state = {
  value: 1,
};
}

submitResume(event) {
    event.preventDefault();
    console.log(this.state.company.getValue({value}));

CreatePost.insert({
        company: this.refs.company.getValue(),

        employee: this.refs.employee.getValue(),

    });
    console.log("Employee Profile Submitted!");
}


handleNameChange(event, index, value) {
  console.log(event);
  console.log(index);
  console.log(value);
  this.setState({value});
}

    <form onSubmit={this.submitResume.bind(this)}>

          <SelectField
                    floatingLabelText="Company Name"
                    className="validate"
                    ref="company"
                    id="company"
                    floatingLabelStyle={{fontSize:20}}
                    fullWidth={true}
                    value={this.state.value}
                    onChange={this.handleNameChange}
                  >
                    <MenuItem value={"Google"} primaryText="Google" />
                    <MenuItem value={"Facebook"} primaryText="Facebook" />
                    <MenuItem value={"Amazon"} primaryText="Amazon" />
                    <MenuItem value={"Nest"} primaryText="Nest" />
                    <MenuItem value={"Microsoft"} primaryText="Microsoft" />
            </SelectField>

            <TextField
                className="validate"
                type="text"
                ref="employee"
                id="employee"
                hintText="Enter Full Name"
                floatingLabelStyle={{fontSize:20}}
                floatingLabelText="Employee Name"
                multiLine={true}
                rows={1}
                fullWidth={true}
            />

All I needed to do was to pass the text value instead of a number

<MenuItem value={"Google"}    primaryText="Google"    />
<MenuItem value={"Facebook"}  primaryText="Facebook"  />
<MenuItem value={"Amazon"}    primaryText="Amazon"    />
<MenuItem value={"Nest"}      primaryText="Nest"      />
<MenuItem value={"Microsoft"} primaryText="Microsoft" />

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM