Question

我正在使用下面的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;

Answer 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',
     }} >

希望这会有所帮助，

欢呼！！

在选择控件中选择项目不会在页面上保持选中状态。

1 个答案: