組合字段顯示默認值，而不是顯示值

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> 
    ... 
}