поле ввода ввода всегда возвращает неопределенное

Question

всякий раз, когда я пытаюсь выбрать параметр в поле ввода, он должен установить значение состояния для выбранной опции, но возвращает неопределенное значение

Я использую Semantic Ui Form Form для получения ввода, но когда я выбираю опцию и отправляю ее, я получаю неопределенную

 import React from 'react'
 import { Form, Input, TextArea, Button, Select, Container } from 
 'semantic-ui-react'

const RankOptions = [
{ key: 'lg', text: 'Lt-Gen', value: 'Lt-Gen' },
{ key: 'mg', text: 'Mj-Gen', value: 'Mj-Gen' },
{ key: 'b', text: 'Brig', value: 'Brig' },
{ key: 'col', text: 'Col', value: 'Col' },
{ key: 'lc', text: 'Lt-Col', value: 'Lt-Col' },
{ key: 'm', text: 'Major', value: 'Mj' },
{ key: 'capt', text: 'Capt', value: 'Capt' },
{ key: 'lt', text: 'Lt', value: 'Lt' },
{ key: '2lt', text: '2-Lt', value: 'Lt-2' },

 ]

  export default class Employee extends React.Component{
  state={}

    handleSubmit = () => {
    console.log(this.state)
    }
    handlerankChange = (e) => {
    const value = e.target.value
    this.setState({
     rank : value
    })
    }
    render() {
    return (
        <Container>
        <Form size='huge'>
            <Form.Group widths='equal'>
                <Form.Field 
                name = 'rank'
                control = {Select}
                label = 'Rank'
                options = {RankOptions}
                placeholder = 'Rank'
                value = {this.state.value}
                onChange = {this.handlerankChange}
                />

          <Button primary onClick= 
        {this.handleSubmit}>Submit</Button>
        </Form>
          </Container>
        )
        }

         }

у государства должен быть любой вариант из рядов

Answer 1

Вам поможет рабочий код:

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import {
  Button,
  Form,
  Grid,
  Header,
  Image,
  Message,
  Segment,
  Label,
  Dropdown
} from "semantic-ui-react";
import Select from "react-select";
import "./index.css";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class App extends React.Component {
  state = {
    selectedOption: ""
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };

  render() {
    const { selectedOption } = this.state;
    const value = selectedOption && selectedOption.value;

    return (
      <div className="login-form">
        <Grid
          textAlign="center"
          style={{ height: "100%" }}
          verticalAlign="middle"
        >
          <Grid.Column style={{ maxWidth: 450 }} textAlign="left">
            <Form size="large">
              <Segment>
                <div>
                  <Select
                    name="form-field-name"
                    value={value}
                    onChange={this.handleChange}
                    options={[
                      { value: "one", label: "One" },
                      { value: "two", label: "Two" }
                    ]}
                  />
                </div>
              </Segment>
            </Form>
          </Grid.Column>
        </Grid>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Источник кода на codesandbox

Answer 2

вам не нужно обращаться к значению через e.target.value, обратный вызов предоставляет объекту ключ 'value';

например:

import React from 'react'
     import { Form, Input, TextArea, Button, Select, Container } from 
     'semantic-ui-react'

const RankOptions = [
{ key: 'lg', text: 'Lt-Gen', value: 'Lt-Gen' },
{ key: 'mg', text: 'Mj-Gen', value: 'Mj-Gen' },
{ key: 'b', text: 'Brig', value: 'Brig' },
{ key: 'col', text: 'Col', value: 'Col' },
{ key: 'lc', text: 'Lt-Col', value: 'Lt-Col' },
{ key: 'm', text: 'Major', value: 'Mj' },
{ key: 'capt', text: 'Capt', value: 'Capt' },
{ key: 'lt', text: 'Lt', value: 'Lt' },
{ key: '2lt', text: '2-Lt', value: 'Lt-2' },

 ]

  export default class Employee extends React.Component{
  state={}

    handleSubmit = () => {
    console.log(this.state)
    }

    handlerankChange = ({ value }) => {
      this.setState({
        rank : value
      })
    }
    render() {
    return (
        <Container>
          <Form size='huge'>
              <Form.Group widths='equal'>
                  <Form.Field 
                  name = 'rank'
                  control = {Select}
                  label = 'Rank'
                  options = {RankOptions}
                  placeholder = 'Rank'
                  value = {this.state.rank} // this should be rank
                  onChange = {this.handlerankChange}
                  />
            </Form.Group>.

            <Button primary onClick= 
             {this.handleSubmit}>Submit</Button>
          </Form>
        </Container>
      )
    }

         }

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

Answer 3

Установить начальное значение для rank в state как

state = {
  rank:''
}

и изменить

           <Form.Field 
                name = 'rank'
                control = {Select}
                label = 'Rank'
                options = {RankOptions}
                placeholder = 'Rank'
                value = {this.state.rank}
                onChange = {this.handlerankChange}
                />