Ant Design组件中各种小设置_andt desgin 加载字体-优快云博客

本文记录了在使用Ant Design框架进行React开发时遇到的问题，包括如何限制form表单只能输入数字和字母，以及如何设置DatePicker组件的默认时间和initialValue。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习react框架，记录一下学习过程遇到的各种问题

Ant Design中form表单中只能输入数字和字母（非提示验证）

<form>
  <Form.Item {...tailFormItemLayout}>
    {getFieldDecorator('AddressSix', {
      getValueFromEvent: (event) => {
        return event.target.value.replace(/\W/g,'')
      },
    })(
        <Input maxLength={2}/>
       //设置输入长度最长为2
    )}
  </Form.Item>
</form>

Ant Design DatePicker日期选择器设置默认时间

import moment from 'moment';
class app extends React.Component{
 constructor(props) {
   super(props)
   this.state = {
    startDate:"",
    yearslate:""
   }
 }
componentWillMount(){
  const startDate = this.state.startDate;
  startDate = moment();
  var yearslate= this.state.yearslate;
  yearslate= moment().add(1, 'years');
}
 onChange = (date, dateString) => {
   console.log(date, dateString);
 }
 render(){
  <DatePicker defaultValue={this.state.startDate} onChange={this.onChange} showTime />,
  //<DatePicker defaultValue={this.state.yearslate} onChange={this.onChange} showTime />,
 }
}

如果是在Ant Design form组件中defaultValue需要设置成initialValue

<FormItem label="Date">
{getFieldDecorator('date', {
 rules: [
  {
  type: 'object',
  required: true,
  message: 'Please select Date!',
  },
 ],
 initialValue:this.state.startDate
 })(
  <DatePicker onChange={onChange} showTimeallowClear={false}/>,
 )}
</FormItem>