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