zoukankan      html  css  js  c++  java
  • Alibaba Fusion Design 的form教程

    import React, { useState } from 'react'
    import { Button } from '@alifd/next';
    import { Input, Button, Field } from '@alifd/next';
    
    function index() {
        const field = Field.useField();
    
        const { init, setValue, reset, getError } = field;
    
        function onGetValue() {
            console.log(field.getValue("input"));
        }
    
        function onSetValue() {
            field.setValue("input", "xyz");
        }
        return (
            <div className="demo">
                <Input
                    {...init("input", {
                        initValue: "test",
                        rules: [
                            {
                                required: true,
                                pattern: /hello/,
                                message: "must be hello"
                            }
                        ]
                    })}
                />
                <span style={{ color: "red" }}>{getError("input")}</span>
    
                <br />
                <br />
                <Button onClick={onSetValue}>setValue</Button>
                <Button onClick={onGetValue}>getValue</Button>
                <br />
                <br />
                <pre style={{ marginTop: 8 }}>
                    {JSON.stringify(field.getValues(), null, 2)}
                </pre>
            </div>
        );
    
    }
    
    export default index
    漫思
  • 相关阅读:
    07组合,模版
    06享元、责任链
    05观察,命令
    04代理,迭代器
    03单例,策略
    02工厂,创建者
    01基础
    css随记02布局
    css随记01编辑技巧,背景与边框
    nodejs随记03
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/14589997.html
Copyright © 2011-2022 走看看