antd + select 默认选中问题？

Question

题目描述

react + antd select 默认选中问题

题目来源及自己的思路

我是通过 const { getFieldDecorator } = this.props.form;来设置他们的默认值的，并通过action监听select的变化，但是数据拿过来后，并不是我想要的数据格式，是这样的observerObject。我只有通过JSON.stringify来转化，然后在通过JSON.parse转化回去。现在我想用antd里面的select里面的labelInValue来设置。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
@observer
class RelativelyStrongIndexForm extends Component {
componentWillMount() {

this.store = this.props.store;                      // 让代码写得短些
this.store.fetchSelectOptions();                    // 取菜单数据

}

handleSubmit = (e) => {

e.preventDefault();
this.props.form.validateFields((err, values) => {
  if (!err) {
    const params = {
      assetName: JSON.parse(values.assetType).name,
      benchmarkName:JSON.parse(values.benchmarkType).name,
      assetType: JSON.parse(values.assetType).index,
      benchmarkType: JSON.parse(values.benchmarkType).index,
      beginDate: values.beginDate.format('YYYYMMDD'),
      endDate: values.endDate.format('YYYYMMDD'),
      interval: values.interval,
      method: JSON.parse(values.method).index
    };
    this.store.fetchChartData(params);
  }
});

};

render() {

const { store: {
  setShowExponential, setShowRelative, setShowExcess,setShowSouthChina,setShowTreasury,
  setShowDeviation, setShowCriteria,
  curStockOptions, curBondOptions, curRoeTypeOptions,
  defaultBeginDate, defaultEndDate, defaultInterval
} } = this.props;
const { getFieldDecorator } = this.props.form;
// TODO: 本来 「指数名称」、「基准指数」两个字段不用提交，不用使用getFieldDecorator，
//       但目前defaultValue不知道为什么不生效，只好继续用getFieldDecorator里的initialValue
return (
  <Form className={styles.form} onSubmit={this.handleSubmit} hideRequiredMark>
    <div className="form-body">
      <FormItem label="指数名称" className="form-item flex-form-item">
        {getFieldDecorator('assetType', {
          initialValue: curStockOptions.length > 0 ? JSON.stringify(curStockOptions[0]) : undefined,
          
        })(
          <Select size="small" >
            {curStockOptions.map(m => (<Option key={m.name} value={JSON.stringify(m)}>{m.name}</Option>))}
          </Select>
        )}
      </FormItem>
      <FormItem label="基准指数" className="form-item flex-form-item">
        {getFieldDecorator('benchmarkType', {
          initialValue: curBondOptions.length > 0 ? JSON.stringify(curBondOptions[0]) : undefined,
          rules: [{ required: true, message: '必填' }],
        })(
          <Select size="small" >
            {curBondOptions.map(i => (<Option key={i.name} value={JSON.stringify(i)}>{i.name}</Option>))}
          </Select>
        )}
      </FormItem> 
      <FormItem label="相对强弱算法" className="form-item flex-form-item">
        {getFieldDecorator('method', {
          initialValue: curRoeTypeOptions.length > 0 ?JSON.stringify(curRoeTypeOptions[0]) : undefined,
          rules: [{ required: true, message: '必填' }],
        })(
          <Select size="small" >
            {curRoeTypeOptions.map(i => (<Option key={i.name} value={JSON.stringify(i)}>{i.name}</Option>))}
          </Select>
        )}
      </FormItem> 
      
      <FormItem label="开始日期" className="form-item flex-form-item">
        {
          getFieldDecorator('beginDate', {
            initialValue: defaultBeginDate,
            rules: [{ required: true, message: '必填' }],
          })(
            <DatePicker size="small" allowClear={false} />
          )
        }
      </FormItem>
      <FormItem label="结束日期" className="form-item flex-form-item">
        {
          getFieldDecorator('endDate', {
            initialValue: defaultEndDate,
            rules: [{ required: true, message: '必填' }],
          })(
            <DatePicker size="small" allowClear={false} />
          )
        }
      </FormItem>
      <FormItem label="超额收益周期" className="form-item flex-form-item">
        {
          getFieldDecorator('interval', {
            initialValue: defaultInterval,
            rules: [{ required: true, message: '必填' }],
          })(
            <Input addonAfter="交易日" type="number" size="small" />
          )
        }
      </FormItem>
      
      <Form.Item className="checkbox-form-item">
        <Checkbox
          defaultChecked={true}
          onChange={(e) => { setShowExponential(e.target.checked); }}
        >
          显示指数走势
        </Checkbox>
      </Form.Item>
      <Form.Item className="checkbox-form-item">
        <Checkbox
          defaultChecked={true}
          onChange={(e) => { setShowRelative(e.target.checked),setShowDeviation(e.target.checked); }}
        >
          显示相对强弱
        </Checkbox>
      </Form.Item>
      <Form.Item className="checkbox-form-item">
        <Checkbox
          defaultChecked={true}
          className="extraYield"
          onChange={(e) => { setShowExcess(e.target.checked),setShowCriteria(e.target.checked); }}
        >
          显示超额收益
        </Checkbox>
      </Form.Item>
      <Form.Item className="checkbox-form-item">
        <Checkbox
          defaultChecked={true}
          className="industry"
          onChange={(e) => { setShowSouthChina(e.target.checked),setShowCriteria(e.target.checked); }}
        >
          显示南华工业 
        </Checkbox>
      </Form.Item>
      <Form.Item className="checkbox-form-item">
        <Checkbox
          defaultChecked={true}
          className="stateDebt"
          onChange={(e) => { setShowTreasury(e.target.checked),setShowCriteria(e.target.checked);}}
        >
          显示国开债10年 
        </Checkbox>
      </Form.Item>
    </div>
    <div className="form-btn-wrapper">
      <Button type="primary" className="btn-ok" htmlType="submit">提交</Button>
    </div>
  </Form>
);

}
}

你期待的结果是什么？实际看到的错误信息又是什么？

希望大神贴上代码，我自己写的错误信息是getFieldDecorator和defaultValue不能同时使用，推荐我使用position.initalValue我试了一下还是不行。

Answer 1

你设置的initialValue是组件的默认值。只设置initialValue时，这个Select组件是一个非受控组件。initialValue的值只在初始化的第一次渲染时才会生效。所以你的initialValue的只变化了，组件的值并没有改变。
解决办法。在改变initialValue值之后。手动让这个Select组件重新渲染一次。比如更改这个组件的Key值。或者让这个组件消失之后重新渲染。也可以将组件改为受控组件。即不使用initialValue指定初始值，而是使用value强制指定组件的值