如何使用React Bootstrap FormControl下拉菜單將值發送到狀態？

Question

我正在使用React-Bootstrap FormControl下拉列表。 在此DD中，我應用了map函數，該函數迭代並提供下拉選項。

我沒有得到如何設置所選選項的值。 我試圖使用onChange和onSelect 。 在更改時，我調用了以下代碼行：以下是在Reactjs中使用React-Bootstrap的drop的簡單示例：

export default class SignUp extends Component {

構造函數（props，context）{super（props，context）;

this.handleChange = this.handleChange.bind(this);
this.register =this.register.bind(this);
this.handleChangeDate = this.handleChangeDate.bind(this);

this.state = {
 gender:'',
 genderCat: [],
}
handleChangeGender(){
  const name = e.target.name;
  const value = e.target.value;
  console.log(name, value);
  this.setState({[name]: value});
  console.log(this.state);   
}

 componentDidMount() {
api to get gender => GetData('getGender').then( (result) => {
    this.setState({
      genderCat: result

      });
    // this.state.data = result.message_text;
    // console.log(data.message_text);
})    



 render() {
                <FormControl
                    name="gender"
                    componentClass="select"
                    placeholder="select"
                    onChange={this.handleChangeGender}
                  >

                      {
                        this.state.genderCat.map((data) =>
                        <option key={data.id} value={data.value}  > 
                         {data.name}</option>
                        )
                      } 
                        <FormControl.Feedback />
                    </FormControl>  
   }
  }

如何在這里設置狀態值？ 我比狀態值落后一步。就像第一次，如果我選擇Male（來自地圖函數，其值為1），然后在狀態下給定null，然后onchange女性為其取1，現在如果我更改為否則則取2（其女值）

Answer 1

我不知道為什么不能這樣做，但是這是文檔中的一個有效示例，沒有經過驗證，並且做了一些改動：

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;