コンボフィールドは、表示値の代わりにデフォルト値を表示します。

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