组合字段显示默认值，而不是显示值

Question

所以我想用JSX语法在React中定义一个组合框。但是，用户界面不断向我显示默认值，而不是第一次渲染时的显示值。 ComboBox是我的代码中的自定义React元素。

下面是代码 -

**UI file** 
export default class UI extends Component { 
    render() { 
    const { store } = this.props; 
    return (
     <div> 
     <Form horizontal> 
      <ComboBox value={store.defaultValue}> 
      <Option value={"internalValue1"}>{'DisplayValue1'}</Option> 
      <Option value={"internalValue2"}>{'DisplayValue2'}</Option> 
      </ComboBox> 
     </Form> 
     </div> 
    ); 
    } 
} 

**store file** 
import { observable } from 'mobx'; 

export default class store{ 
    @observable defaultValue= "internalValue1"; 
} 

下面的代码显示internalValue1如在初始呈现组合框中显示值。如何在第一次渲染时显示DisplayValue1本身？

Answer 1

那是因为无论何时调用渲染，该值始终设置为store.defaultValue。

已经在ComboBox组件类似onChange，每当有变化更新状态，在构造函数中添加默认值的ComboBox

constructor(props) { 
    const { store } = props; 
    this.state = { comboBoxValue: store.defaultValue }; 
} 

render() { 
    ... 
    <ComboBox 
     value={this.state.comboBoxValue} 
     onChange={(e) => this.setState({ comboBoxValue: e.target.value })} 
    > 
     <Option value={"internalValue1"}>{'DisplayValue1'}</Option> 
     <Option value={"internalValue2"}>{'DisplayValue2'}</Option> 
    </ComboBox> 
    ... 
}