Javascript 选择输入字段始终返回未定义

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

 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>
        )
        }

         }

我使用语义ui react表单接受输入，但当我选择选项并提交时，它会给我未定义的信息

 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>
        )
        }

         }

从“React”导入React
从导入{Form，Input，TextArea，Button，Select，Container}
“语义用户界面反应”
常数RankOptions=[
{键：'lg'，文本：'Lt Gen'，值：'Lt Gen'}，
{键：'mg'，文本：'Mj Gen'，值：'Mj Gen'}，
{键：'b'，文本：'Brig'，值：'Brig'}，
{键：'col'，文本：'col'，值：'col'}，
{键：'lc'，文本：'Lt Col'，值：'Lt Col'}，
{键：'m'，文本：'Major'，值：'Mj'}，
{键：'capt'，文本：'capt'，值：'capt'}，
{键：'lt'，文本：'lt'，值：'lt'}，
{键：'2lt'，文本：'2-Lt'，值：'Lt-2'}，
]
导出默认类Employee extends React.Component{
状态={}
handleSubmit=（）=>{
console.log（this.state）
}
handlerankChange=（e）=>{
常量值=e.target.value
这是我的国家({
等级：价值
})
}
render（）{
返回(
提交
)
}
}

---

状态必须是列组中的任何选项，将

状态中的
列组
的初始值设置为

state = {
  rank:''
}

改变

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

将
状态中的
等级的初始值设置为

state = {
  rank:''
}

改变

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

工作代码将帮助您：

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"));


从“React”导入React；
从“react dom”导入{render}；
从“/Hello”导入Hello；
进口{
按钮
形式，
网格，
标题，
形象,，
消息
段
标签，
下拉列表
}从“语义用户界面反应”；
从“反应选择”导入选择；
导入“/index.css”；
常量样式={
fontFamily：“无衬线”，
textAlign：“居中”
};
类应用程序扩展了React.Component{
状态={
选择选项：“
};
handleChange=selectedOption=>{
this.setState（{selectedOption}）；
};
render（）{
const{selectedOption}=this.state；
const value=selectedOption&&selectedOption.value；
返回(
);
}
}
渲染（
工作代码将帮助您：

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"));


从“React”导入React；
从“react dom”导入{render}；
从“/Hello”导入Hello；
进口{
按钮
形式，
网格，
标题，
形象,，
消息
段
标签，
下拉列表
}从“语义用户界面反应”；
从“反应选择”导入选择；
导入“/index.css”；
常量样式={
fontFamily：“无衬线”，
textAlign：“居中”
};
类应用程序扩展了React.Component{
状态={
选择选项：“
};
handleChange=selectedOption=>{
this.setState（{selectedOption}）；
};
render（）{
const{selectedOption}=this.state；
const value=selectedOption&&selectedOption.value；
返回(
);
}
}
render（
您不需要通过e.target.value访问值，回调为对象提供键“value”

例如：

从“React”导入React
从导入{Form，Input，TextArea，Button，Select，Container}
“语义用户界面反应”
常数RankOptions=[
{键：'lg'，文本：'Lt Gen'，值：'Lt Gen'}，
{键：'mg'，文本：'Mj Gen'，值：'Mj Gen'}，
{键：'b'，文本：'Brig'，值：'Brig'}，
{键：'col'，文本：'col'，值：'col'}，
{键：'lc'，文本：'Lt Col'，值：'Lt Col'}，
{键：'m'，文本：'Major'，值：'Mj'}，
{键：'capt'，文本：'capt'，值：'capt'}，
{键：'lt'，文本：'lt'，值：'lt'}，
{键：'2lt'，文本：'2-Lt'，值：'Lt-2'}，
]
导出默认类Employee extends React.Component{
状态={}
handleSubmit=（）=>{
console.log（this.state）
}
handlerankChange=（{value}）=>{
这是我的国家({
等级：价值
})
}
render（）{
返回(
.
提交
)
}
}

希望这有帮助！！
您不需要通过e.target.value访问该值，回调为对象提供键“value”

例如：

从“React”导入React
从导入{Form，Input，TextArea，Button，Select，Container}
“语义用户界面反应”
常数RankOptions=[
{键：'lg'，文本：'Lt Gen'，值：'Lt Gen'}，
{键：'mg'，文本：'Mj Gen'，值：'Mj Gen'}，
{键：'b'，文本：'Brig'，值：'Brig'}，
{键：'col'，文本：'col'，值：'col'}，
{键：'lc'，文本：'Lt Col'，值：'Lt Col'}，
{键：'m'，文本：'Major'，值：'Mj'}，
{键：'capt'，文本：'capt'，值：'capt'}，
{键：'lt'，文本：'lt'，值：'lt'}，
{键：'2lt'，文本：'2-Lt'，值：'Lt-2'}，
]
导出默认类Employee extends React.Component{
状态={}
handleSubmit=（）=>{
console.log（this.state）
}
handlerankChange=（{value}）=>{
这是我的国家({
等级：价值
})
}
render（）{
返回(
.
提交
)
}
}

希望这能有所帮助！！
您正在将属性名秩设置为一个状态，但在输入表单中获取属性名值（好像您将设置
this.setState（{value:value}）
尝试
value={this.state.rank}
您正在将属性名秩设置为一个状态，但在输入表单中获取属性名值（好像您要设置
this.setState（{value:value}）
。尝试
value={this.state.rank}