SelectField

时间:2017-07-06 03:04:02

标签: javascript reactjs meteor react-jsx material-ui

我只想获取公司的名称并将其保存到数据库

我正在尝试使用文本,并尝试使用以下代码

进行提取

sport: this.refs.company.getValue(),它完美无缺。

然后我决定使用公司的SelectField from Material UI

而且它没有提取数据。

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}
            />

它适用于TextField,但不适用于SelectField。

2 个答案:

答案 0 :(得分:1)

现在看到这个更新的 您将在参数valueindexevent

之一中获得价值
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}
            />

答案 1 :(得分:0)

我需要做的就是传递文本值而不是数字

<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" />