antd, Select, Option动态变更时,仍能选中预置值

edeity
  • 283

根据Select的官方实例

import { Select } from 'antd';
const Option = Select.Option;

function handleChange(value) {
  console.log(value);  // { key: "lucy", label: "Lucy (101)" }
}

ReactDOM.render(
  <Select labelInValue defaultValue={{ key: 'lucy' }} style={{ width: 120 }}>
    <Option value="jack">Jack (100)</Option>
    <Option value="lucy">Lucy (101)</Option>
  </Select>
, mountNode);

当组件初始化的时候,显示的是lcuy对应的Lucy(101)
但当Option是动态变更时, 如

setTimeOut(() => {
  this.setState({
    children: (
        <Option value="lucy">Lucy (101)</Option>
    )
  })
}, 100)

// ....

ReactDOM.render(
  <Select labelInValue defaultValue={{ key: 'lucy' }} style={{ width: 120 }}>
    {children}
  </Select>
, mountNode);

key显示的lucy;(我的期望是:Lucy(101)

我要怎样才能做,才能在Option变更时,仍然显示的是Lucy(101)而不是lucy呢;

我搜索到一个接近的问题,但我的问题的关键点不是defaultValue,而是我需要在Option数据变更后,能够实现OptionChange这样的事件,使得能触发选中keylucy<Option>(并且显示的值是Lucy(101));假如没有该值,则显示空白;

谢谢:-D

回复
阅读 6.8k
1 个回答
✓ 已被采纳

当年问的一个傻问题,其根本原因就是一般antd组件采用defaultValue时,只保证影响初始化时的默认值,不参与后续的状态变量同步。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏