选择输入字段总是返回未定义答案

【问题标题】：select input field always return undefined选择输入字段总是返回未定义
【发布时间】：2019-07-10 06:52:46
【问题描述】：

当我尝试在输入字段中选择一个选项时，它必须将状态值设置为所选选项，但它返回未定义

我正在使用 Semantic ui react 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>
        )
        }

         }

状态必须是等级中的任何选项

【问题讨论】：

您正在将属性名称排名设置为一个状态，但在输入表单中达到属性名称值（就像您将设置 this.setState({ value: value})。尝试 value = {this.state.rank}

标签： javascript reactjs semantic-ui-react

【解决方案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上的代码来源

【讨论】：

【解决方案2】：

将state中rank的初始值设置为

state = {
  rank:''
}

改变

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

【讨论】：

【解决方案3】：

不需要通过 e.target.value 访问值，回调为对象提供 key '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>
      )
    }

         }

希望这会有所帮助！

【讨论】：