Question

我试图根据存储在组件状态中的值来编写用户从下拉列表中选择的内容，但是我无法弄清楚如何获取所选选项的值并将其更新为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是异步的，并且不会立即改变你的状态值。

根据the docs，

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

    }

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

2 个答案:

this.handleCatChange