Выбор элемента в элементе управления не остается выбранным на странице. - PullRequest
Новая
       6

Выбор элемента в элементе управления не остается выбранным на странице.

0 голосов
/ 08 января 2019

Я работаю над 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;

1 Ответ

0 голосов
/ 08 января 2019

В 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, компонент будет использовать собственный элемент select. 

 <Select
      native
      value= {this.state.invoiceNumber}
      onChange ={this.handleChange}
      inputProps={{
      name: 'invoiceNumber',
      id: 'invoiceNumber',
     }} >

Надеюсь, это поможет,

Ура !!

...