如何使用 react bootstrap FormControl 下拉列表将值发送到状态？

Question

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

我不知道如何设置 selected 选项的值。我尝试使用 onChange 和 onSelect。在更改时，我调用了以下代码行：下面是使用 React-Bootstrap:

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

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

这里如何设置状态值？如果我 select Male（来自 map 函数，它的值为 1），那么我第一次落后状态 value.Like 一步然后在状态下它给出 null，但是然后 onchange female 它取 1 ，现在如果我换成 other 那么它需要 2（它的 female 值）

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;

如何使用 react bootstrap FormControl 下拉列表将值发送到状态？

How to send value to state using react bootstrap FormControl dropdown?

javascript

reactjs

react-bootstrap

form-control