javascript - 如何使用 react 引导 FormControl 下拉列表将值发送到状态？

Question

我正在使用React-Bootstrap FormControl落下。在此 DD 中，我应用了 map 函数，该函数可迭代并提供下拉选项。

我不知道如何设置所选选项的值。我尝试使用 onChange 和 onSelect。在更改时，我调用了以下代码行: 下面是使用 React-Bootstrap 在 Reactjs 中使用 drop 的简单示例:

export default class SignUp extends Component {

构造函数( Prop ，上下文){ super ( Prop ，上下文)；

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(来自 map 函数，其值为 1)，然后在状态中它给出 null，但然后 onchange Female 它取 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;