Ant-d问题总结

• From 中使用输入框问题总结:

const TestCmp = (props)=>{
    const [form] = From.useForm(); // 注意这里返回的是数组
    const [count setCount] = useState('');
    // 如果在提交时校验,需要调用form.validateFields()函数,这个是个
    const onSave = async ()=>{
        try {
          const values = await form.validateFields();
          ....
        } catch () {
        
        }
    }
    const handleKeyDown=(event)=>{
       let reg = /^(0?|-?[]1-9)\d*)$/
       if(!(reg.test(event.key) || event.key === "Backspace")){ // 如果输入字符不是数字或者删除,则阻止
          event.preventDefault();
       }
    }
    const check = (rule,value,callback)=>{
        if (value && value > 100) {
            return Promise.reject("请输入0~100"的整数)
        } else {
            return Promise.resolve();
        }
    }

    const onChange=(value)=>{
        if(isNaN(Number(val))) {
            message.warning("请输入数字")
        }
        setCount(value);
    }
 
    return (
      <Form form = {form}>
          <Form.Item label="解决Form中Input组件type为number时设置maxLength属性无效的问题"
               name="amount"
               getValueFromEvent={(e)=>{
                    if(e.target.value.length > 50) {
                        return e.target.value.slice(0,50);
                    }
                    return e.target.value;
                }}
          >
              <Input style={{width:200}} type="number">
          </Form.Item>
         <Form.Item label="限制输入框只能输入0~9的数字"
               name="count"
               rules={[{validator:check}]}
          >
              <Input value={count}
                  onChange={(e)=>onChange(e.target.value)}
                  onKeyDown={handleKeyDown}
              />
          </Form.Item>
      </Form>
      <Button onClick={save}>保存</Button>
    )
}