如何在react-bootstrap中选择FromControl的选定选项的值

Question

我试图根据存储在组件状态下的值，将用户从下拉列表中选择的内容写入Firebase数据库，但是我不知道如何获取所选选项的值并将其更新为storeType状态

这是我的下拉菜单：

<FormGroup>
                        <FormControl
                            componentClass="select"
                            placeholder="Store type"
                            onChange={this.handleCatChange}
                        >
                            <option value="placeholder">Choose eatery type...</option>
                            <option value="cafe">Cafe</option>
                            <option value="bakery">Bakery</option>
                            <option value="pizza">Pizza store</option>
                            <option value="sushi">Sushi store</option>
                            <option value="buffet">Buffet</option>
                            <option value="donut">Donut store</option>
                            <option value="other">Other</option>
                        </FormControl>
</FormGroup>

this.handleCatChange：

handleCatChange(e) {
    this.setState({
        storeType: e.target.value
    })
    console.log(this.state.storeType)
}

Answer 1

您的状态有效，但是当您执行console.log时，状态无效。 这是因为setState是异步的，不会立即更改您的状态值。

根据文档 ，

setState（）不会立即使this.state发生突变，但会创建一个挂起的状态转换。 调用此方法后访问this.state可能会返回现有值。 无法保证对setState的调用的同步操作，并且可能会为提高性能而批量调用。

如果需要确保在进行setState调用之后事件的顺序，则可以传递一个回调函数。

this.handleCatChange

handleCatChange(e) {
    this.setState({
        storeType: e.target.value
    }, () => console.log(this.state.storeType))
}

Answer 2

您需要像这样绑定您的功能..

 onChange={this.handleCatChange.bind(this)}



    constructor () {
        super();
        this.state = { 
          storeType: '' 
        };
      }


    handleCatChange(e) {
    const type = e.target.value;
        this.setState({
            storeType:type 
        });

    }