简单的自定义表单控件

核心为onChang事件，赋值需要关注value

 

 <Form.Item
                    name='position'
                    label="位置"
                    style={itemStyle}
                >
                    <InputXYZ />
                </Form.Item >

 

 

const InputXYZ = (props) => {
    const { id, value = {}, onChange } = props;
    const [number, setNumber] = useState({});
    const onNumberChange = useCallback((e, name) => {

        console.log();
        if (Number.isNaN(Number(e.target.value))) return;
        console.log(!Number.isNaN(e.target.value));
        const newNumber = { ...number, [e.target.name]: e.target.value }
        setNumber(newNumber);
        onChange?.({
            number,
            ...value,
            ...newNumber,
        });
    }, [number])
    return (
        <span id={id} style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Input
                type="text"
                value={value.x}
                name="x"
                onChange={onNumberChange}
                style={{
                    width: 80,
                }}
            />
            <Input
                type="text"
                name="y"
                value={value.y}
                onChange={onNumberChange}
                style={{
                    width: 80,
                }}
            />
            <Input
                type="text"
                name="z"
                value={value.z}
                onChange={onNumberChange}
                style={{
                    width: 80,
                }}
            />

        </span>
    );

}