我正在使用下面的jsx,当我在select控件中选择一个项目时, 我希望我选择的菜单项显示/保持在我的页面上。这没有发生。 每次选择一个选项时,它始终为空白。永远不会选择它。
我在这里做什么错了?
import React, {PureComponent} from 'react';
import {Link} from 'react-router-dom';
import PageBase from "../../../widgets/PageBase/PageBase";
import {
Button,
FormControl,
Icon,
InputLabel,
MenuItem,
Paper,
Select,
TextField,
Typography
} from "material-ui-next";
import './PostCredit.css';
import "../customer.css";
class PostCredit extends PureComponent {
constructor(props){
super(props);
this.state = {
invoiceNumber: '',
};
}
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<div>
<form>
<div>
<div className="dot1">
<FormControl id="fred" className="form-control">
<InputLabel htmlFor="invoiceNumber" shrink>Invoice Prepared</InputLabel>
<Select
value= {this.state.invoiceNumber}
onChange ={this.handleChange}
inputProps={{
name: 'invoiceNumber',
id: 'invoiceNumber',
}}
>
<MenuItem value=""><em>None</em></MenuItem>
<MenuItem value='1234567890'>1234567890</MenuItem>
<MenuItem value='2345678901'>2345678901</MenuItem>
</Select>
</FormControl>
</div>
</div>
</form>
</div>
);
}
}
export default PostCredit;
答案 0 :(得分:1)
在Select handleChange event.target.name中未定义,要解决此问题,有两个选项,
选项1:-
请更改
<Select
value= {this.state.invoiceNumber}
onChange ={this.handleChange}
inputProps={{
name: 'invoiceNumber',
id: 'invoiceNumber',
}} >
收件人
<Select
value= {this.state.invoiceNumber}
onChange ={this.handleChange}
name='invoiceNumber'
>
选项2:-
如果您只想使用输入道具,请 添加本地属性 以选择组件,
默认情况下native是false。如果native为true,则组件将使用native select元素。
<Select
native
value= {this.state.invoiceNumber}
onChange ={this.handleChange}
inputProps={{
name: 'invoiceNumber',
id: 'invoiceNumber',
}} >
希望这会有所帮助,
欢呼!!