Javascript 如何使用react bootstrap FormControl下拉菜单将值发送到状态？

我正在使用下拉菜单。在这个DD中，我应用了map函数，它迭代并提供下拉选项

我不知道如何设置所选选项的值。我尝试使用

onChange

和

onSelect

。在更改时，我调用了以下代码行： 下面是使用React引导在Reactjs中使用的drop的简单示例：

export default class SignUp extends Component {

构造函数（道具、上下文）{ 超级（道具、背景）

this.handleChange=this.handleChange.bind（this）；
this.register=this.register.bind（this）；
this.handleChangeDate=this.handleChangeDate.bind（this）；
此.state={
性别：''，
性别：[]，
}
handleChangeGender（）{
const name=e.target.name；
常量值=e.target.value；
console.log（名称、值）；
this.setState（{[name]：value}）；
console.log（this.state）；
}
componentDidMount（）{
获取性别的api=>GetData（'getGender'）。然后（（结果）=>{
这是我的国家({
性别：结果
});
//this.state.data=result.message\u text；
//console.log（数据、消息和文本）；
})    
render（）{
{
this.state.genderCat.map（（数据）=>
{data.name}
)
} 
}
}

---

如何在这里设置状态值？我比状态值落后一步。就像我第一次选择男性（来自映射函数，它的值是1），然后在状态中它的give null，但是一旦改变女性它的take 1，现在如果我改变为其他，那么它的take 2（它的女性值）

我不知道您为什么不能这样做，但这里有一个未经验证的文档工作示例，只做了一点修改：

import React from "react";
import { FormGroup, ControlLabel, FormControl } from "react-bootstrap";

const genderList = [
  { id: 1, name: "male" },
  { id: 2, name: "female" },
  { id: 3, name: "other" }
];

// mimicing API request
const getGender = () =>
  new Promise(resolve =>
    setTimeout(() => {
      resolve(genderList);
    }, 1000)
  );

class FormExample extends React.Component {
  state = {
    gender: "",
    genderCat: []
  };

  componentDidMount() {
    getGender().then(data =>
        this.setState({ genderCat: data, gender: data[ 0 ].name }));
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  createOptions = () =>
    this.state.genderCat.length
      ? this.state.genderCat.map(data => (
          <option key={data.id} value={data.name}>
            {data.name}
          </option>
        ))
      : "";

  render() {
    return (
      <form>
        <p>
          Selected gender: <strong>{this.state.gender}</strong>
        </p>
        <FormGroup controlId="formControlsSelect">
          <ControlLabel>Select</ControlLabel>
          <FormControl
            name="gender"
            componentClass="select"
            onChange={this.handleChange}
          >
            {this.createOptions()}
          </FormControl>
        </FormGroup>
      </form>
    );
  }
}

export default FormExample;

从“React”导入React；
从“react bootstrap”导入{FormGroup，ControlLabel，FormControl}；
警察性别名单=[
{id:1，姓名：“男”}，
{id:2，姓名：“女性”}，
{id:3，名称：“其他”}
];
//模拟API请求
const getGender=（）=>
新承诺（解决=>
设置超时（（）=>{
决心（性别主义）；
}, 1000)
);
类FormExample扩展了React.Component{
状态={
性别：“，
性别：[]
};
componentDidMount（）{
getGender（）。然后（数据=>
this.setState（{genderCat:data，gender:data[0].name}））；
}
handleChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
};
createOptions=（）=>
这个。状态。性别。长度
？this.state.genderCat.map（数据=>(
{data.name}
))
: "";
render（）{
返回(

所选性别：{this.state.gender}

挑选
{this.createOptions（）}
);
}
}
导出默认格式示例；

你能提供你用onChange尝试过的东西吗？更新的@eramit2010I做了一个更改。@eramit2010c你能试试这个吗？onChange={e=>{this.getSelectedVal（e.target.value）；}无法读取未定义的属性“name”这是上面代码行no 2@eramit2010中的新错误这是我在map中实现选项的方式：`Gender{this.state.genderCat.map（（data）=>{data.name}）}我不明白你想做什么。只需用你的全部代码编辑你的问题，然后再解释一下。你为什么要使用getSelectedVal？你可以用我给出的代码设置你的状态。你将状态保留为“值”键。您正在代码中使用e.target.name，但FormControl中没有附加任何名称。请尽可能提供更多详细信息。例如，选择选项将在您的状态中保留性别？是否要使用此选项设置状态？是的，它将在状态中保留性别。由于有许多其他输入字段，因此我正在设置状态并使用该选项进行一些操作。如何使用此选项设置状态？@devserkanI已编辑了我的答案。它只是将状态更改为名称值。此处的工作示例：

import React from "react";
import { FormGroup, ControlLabel, FormControl } from "react-bootstrap";

const genderList = [
  { id: 1, name: "male" },
  { id: 2, name: "female" },
  { id: 3, name: "other" }
];

// mimicing API request
const getGender = () =>
  new Promise(resolve =>
    setTimeout(() => {
      resolve(genderList);
    }, 1000)
  );

class FormExample extends React.Component {
  state = {
    gender: "",
    genderCat: []
  };

  componentDidMount() {
    getGender().then(data =>
        this.setState({ genderCat: data, gender: data[ 0 ].name }));
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  createOptions = () =>
    this.state.genderCat.length
      ? this.state.genderCat.map(data => (
          <option key={data.id} value={data.name}>
            {data.name}
          </option>
        ))
      : "";

  render() {
    return (
      <form>
        <p>
          Selected gender: <strong>{this.state.gender}</strong>
        </p>
        <FormGroup controlId="formControlsSelect">
          <ControlLabel>Select</ControlLabel>
          <FormControl
            name="gender"
            componentClass="select"
            onChange={this.handleChange}
          >
            {this.createOptions()}
          </FormControl>
        </FormGroup>
      </form>
    );
  }
}

export default FormExample;