[英]How to get the value from FormControl with React-Bootstrap in Meteor
[英]How to send value to state using react bootstrap FormControl dropdown?
我正在使用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(其女值)
我不知道为什么不能这样做,但是这是文档中的一个有效示例,没有经过验证,并且做了一些改动:
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.