首页 » JS » 正文

ReactJS-antd Select组件defaultValue失效

这几天开始react的开发,用的是antd的组件,因为不熟悉react也不熟悉antd,今天踩了不少坑,其中很多是Select组件的,故做一下总结。

  1. antd select组件单选下拉框defaultValue失效

    代码如下

  2. <FormItem {...formItemLayout} label="回访人员">
      {getFieldDecorator('visit_user_id', {
    	initialValue: this.state.visit_user_id,
    	rules: [{
    	  required: false,
    	}],
      })(
    	<Fragment>
    	  <Select
    		placeholder="请选择"
    		style={{ width: '50%' }}
    		defalutValue={this.state.visit_user_id}
    		onChange={(v) => this.setState({visit_user_id: v})}
    	  >
    		{
    		  this.state.parkAdminList.length && this.state.parkAdminList.map((v, i) => {
    		    <Option key={`${i}`} value={`${v.user_id}`}>{`${v.real_name} ${v.position}`}</Option>
    		  })
    		}
    	  </Select>
    	</Fragment>
    	)
      }
    </FormItem>

    【问题1】:页面报错Uncaught TypeError: Cannot use 'in' operator to search for 'vaulue' in undefind,console中只报第三方库的错误,没有显示自己写的代码错误在哪。

    【解决1】:经过逐步排查,发现当到这个Select组件时出现错误。经过查找得知,这种循环渲染Option的写法很常用,但存在一个问题,当this.state.parkAdminList为空[]时,this.state.parkAdminList.length后面的this.state.parkAdminList.map没有执行,Select标签为<Select>{ undefined }</Select>导致报错,而Select可为<Select><option value="1">选择</option></Select> ,或者 <Select>{ null }</Select>

    修改代码如下

    {
        this.state.parkAdminList.length ? this.state.parkAdminList.map((v, i) => {
    	return (
    		<Option key={`${i}`} value={`${v.user_id}`}>{`${v.real_name} ${v.position}`}</Option>
    	);
        }) : null
    }

    {
        this.state.parkAdminList.length ? this.state.parkAdminList.map((v, i) => {
    	return (
    		<Option key={`${i}`} value={`${v.user_id}`}>{`${v.real_name} ${v.position}`}</Option>
    	);
        }) : <Option value=''>请选择</Option>
    }

    【问题2】:在默认模式——单选模式下,当Select的defaultValue属性设置为{this.state.visit_user_id}或{1}时,没有匹配到对应的Option;当直接设置defaultValue属性为'1'时,可以默认显示选中的Option。

    【解决2】:查看文档之后,原来还有Select另一个属性value,改用value之后便正常。

    修改代码如下

    <Select
          placeholder="请选择"
          style={{ width: '50%' }}
          value={this.state.visit_user_id}
          onChange={(v) => this.setState({visit_user_id: v})}
    >

    【疑惑】:只是不清楚为什么defaultValue={'1'}时却可正常显示?

  3. antd select组件多选下拉框defaultVaule失效

    代码如下

    <FormItem {...formItemLayout} label="订单完成后通知处理人员">
      {getFieldDecorator('notice_user_id', {
            initialValue: this.state.notice_user_id,
        })(
        <Fragment>
            <Select
                mode="multiple"
                placeholder="请选择"
                style={{ width: '49%' }}
                value={this.state.notice_user_id}
                onChange={this.handleNoticeUserChange}
            >
                {
                    this.state.parkAdminList.length ? this.state.parkAdminList.map((v, i) => {
                        return (
                            <Option key={`${i}`}>{`${v.real_name} ${v.position}`}</Option>
                        );
                    }) : null
                }
            </Select>
        </Fragment>
        )
      }
    </FormItem>

    【问题3】:在设置Select的value属性后,下拉框直接显示this.state.visit_user_id,没有显示对应选中的Option。

    【解决3】:原来是Option标签中没有设置value属性的值,Select的value无法与Option的value绑定。

    修改代码如下

    <Option key={`${i}`} value={`${v.user_id}`}>{`${v.real_name} ${v.position}`}</Option>

    【问题4】:在Select组件为mode="multiple"(多选模式)下,设置Select的value属性后,可默认选中Option,但却无法修改。
    【解决4】:多选模式下Select的value是固定选中的值,defaultValue才是初始选中的值,改用defaultValue之后便正常。

    修改代码如下

    <Select
           mode="multiple"
           placeholder="请选择"
           style={{ width: '49%' }}
           defalutValue={this.state.notice_user_id}
           onChange={this.handleNoticeUserChange}
    >
  4. 以上今天写react时遇到跟antd Select组件相关的问题,特此记录。

发表评论