Question

所以我试图使用JSX语法在React中定义一个组合框。但是，UI会在第一次渲染时继续显示默认值而不是显示值。 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显示为Initial初始化时的组合框显示值。如何在第一次渲染时显示DisplayValue1本身？

Answer 1

这是因为每当调用render时，值总是设置为store.defaultValue。

在onChange组件中使用ComboBox之类的内容，并在发生更改时更新状态，在构造函数中添加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>
    ...
}

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

1 个答案: