Question

我正在使用reactJs +语义ui-react建立一个简单的表单。它工作正常，但很奇怪的是，没有执行选择中的第一个更新事件：

我在下拉菜单中更改了值->什么也没发生，它保留了上一个->我再做一次->起作用

我认为这与初始状态有关：如果我什么都不放，那似乎可行，但是我不喜欢一个空的组合框。这是我的代码段：

class MyForm extends Component {

constructor(props) {
    super(props);

    this.state = {
        selected: 'A'
    };
}

handleComboChange = evt => {
    console.log('combo change');
    this.setState({ selected: evt.target.value });
}

render() {

    const myOpts = [
        { text: 'A state', value: 'A' },
        { text: 'B state', value: 'B' },
    ];

    return (
        <Form>
            <Form.Group widths="equal">
                <Form.Select onChange={this.handleComboChange} fluid label="State" options={myOpts} value={this.state.selected} />
            </Form.Group>
        </Form>);

} }

修改：足够有趣的似乎是与语义UI相关的问题，以下工作正常：

<select value={this.state.selected} onChange={this.handleComboChange}>
                    <option value='A'>A state</option>
                    <option value='B'>B state</option>
                </select>

Answer 1

已解决...语义反应具有定义事件的方式，我必须像这样更改处理函数：

handleComboChange = (evt,data) => {
console.log('combo change');
this.setState({ selected: data.value });

}

组合框不接受第一个更新事件

1 个答案: