Почему я не могу выбрать опцию в select?

Question

Я пытаюсь подключить выбор из библиотеки material ui. Я не знаю, по какой причине я не могу выбрать option и вывести в state? Кто-то сталкивался с такой проблемой?

Подробный пример кода здесь

import React from "react";
import ReactDOM from "react-dom";
import Select from "@material-ui/core/Select/Select";
import InputLabel from "@material-ui/core/InputLabel/InputLabel";
import FormControl from "@material-ui/core/FormControl/FormControl";
import MenuItem from "@material-ui/core/MenuItem/MenuItem";

class App extends React.Component {
  state = {
    age: "",
    name: "hai"
  };
  handleChange = event => {
    this.setState({ [event.target.name]: event.target.valueSelect });
  };
  render() {
    return (
      <div className="App">
        <FormControl style={{ width: "100%", marginTop: "27px" }}>
          <InputLabel htmlFor="age-auto-width">Title</InputLabel>
          <Select
            value={this.state.age}
            onChange={this.handleChange}
            inputProps={{
              name: "hai",
              id: "age-simple"
            }}
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

В вашем коде: this.setState({ [event.target.name]: event.target.valueSelect });

Измените это на event.taget.value

Это происходит из этого значения value={this.state.age} в вашем выборе ...

И вообще ... вычистить это будет выглядеть так:

class App extends React.Component {
  state = { age: "" };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };
  render() {
    return (
      <div className="App">
        <FormControl style={{ width: "100%", marginTop: "27px" }}>
          <InputLabel htmlFor="age-auto-width">Title</InputLabel>
          <Select
            value={this.state.age}
            onChange={this.handleChange}
            inputProps={{
              name: "age"
            }}
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </div>
    );
  }
}

Answer 2

Там нет event.target.valueSelect. Используйте event.target.value. А вот и песочница