DynamicInput

动态录入

基本使用

import {useState} from "react";
import {DynamicInput, dynamicFormRef} from "dynamicformdjx-react";

function App() {
    const [obj, setObj] = useState<Record<string, any>>({
        a: 'Hello world',
        b: 1314,
        c: [5, 2, 0]
    });
    const dynamicInputRef = useRef<dynamicFormRef>(null)
    return (<div>
        <DynamicInput ref={dynamicInputRef} isController value={obj} onChange={(e) => setObj(e)}/>
        <pre>
            {JSON.stringify(obj, null, 2)}
        </pre>
        <div>
            <button onClick={() => {
                dynamicInputRef.current?.onSet?.({
                    test: 'hello World'
                })
            }}>setData
            </button>
        </div>
    </div>)
}

export default App

运行 Demo

API

属性及方法参数与vue3版本一致

除value属性及onChange方法为必传，其他参数一致

Props

属性名	说明	类型	默认值	必填
value	绑定到表单的模型值，父组件传入并与表单同步 (代替modelValue)	object	-	✅

跳到 v3 Props

Function

事件名	说明	回调参数	必填
onChange	当表单值变化时触发，返回新的模型值 (代替update:modelValue)	(value: object)	✅

跳到 v3 Emits

Ref

跳到 v3 Expose